リンクを中央に配置したい

Question

前提・実現したいこと

リンクを中央に配置したいのですが、左に寄ってしまいます。

該当のソースコード

<a href="#" class="btn btn01">リンク</a>

.btn {
    padding: 6px 15px;
	margin: 0 auto;
	text-align: center;
    font-weight: bold;
    display: inline-block;
    text-decoration: none !important;
    font-size: 1.2em;
    border-radius: 5px
}
.btn01 {
    background-color: #11A9B5;
    border: 2px solid #11A9B5;
    color: #fff !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.btn01:hover {
    background-color: transparent;
    border: 2px solid #11A9B5;
    color: #11A9B5 !important;
}

Comments

[退会済みユーザー]

提示された情報だけでは回答者は再現できません。
必要最低限の情報を提示してください。

Answer 1

要素を真ん中寄せさせる方法は何通りもあります。
コードを拝見すると試行錯誤されたようで、いろんな指定が混ざっているのが見受けられます。

以下、手法ごとに3パターン記載しますので、お時間あるときに試してみてください。

①text-align: center; で真ん中寄せ

・HTMLのaタグをdivで囲む
・親要素をblockにし、text-align: center;を指定

以下のコードを追加してください。

<div class="btnarea">
  <a href="#" class="btn btn01">リンク</a>
</div>

.btnarea {
  text-align: center;
  display: block;
}

.btnのtext-align: center;は削除して大丈夫です。

②margin: auto; で真ん中寄せ

・.btnの横幅を指定する
・さらにblock要素にし、margin: auto;を指定

以下のコードを追加してください。

.btn {
  width: 92px;
  display: block;
}

margin: auto;で指定する際は、要素の横幅を認識させることが必須です。

③flexboxで真ん中寄せ

・HTMLのaタグをdivで囲む
・親要素にdisplay: flex;を指定

以下のコードを追加してください。

<div class="btnarea">
  <a href="#" class="btn btn01">リンク</a>
</div>

.btnarea {
  display: flex;
}

flexboxは親要素に指定をするので、aタグをdivで囲んています。

---

今回HTMLがボタン部分しかないのでbodyタグに指定しても反映されますが、本来bodyタグはコンテンツ全体を囲むものなので、親要素に指定する際は新しくdivタグ等を作成することを前提にしたほうが良いです。

Comments

[kama_111]

説明が親切でとてもわかりやすかったです！！！
ご丁寧にありがとうございました！

Answer 2

以下を追記

body {
  display: flex;
}

Answer 3

inline-block の外側に block 要素が必要だと思います。
ブロックレベル要素とインライン要素について勉強されると良いと思います。

<div class="btn-box"><a href="#" class="btn btn01">リンク</a></div>

.btn-box {
    text-align: center;
}

Answer 4

提示の要素は、CSSでインライン要素に指定しているので、親要素（この場合はbody）のtext-alignの影響を受けます

ブラウザは、初期値でCSSのスタイルをいくつか持っています。
HTMLのbodyに対しても持っていて、最近のブラウザは、

body {
  text-align: start;
}

が設定されているので、大概の環境では「左寄り（text-align: left;と同様）」が基本になります。

対策としては「CSSをリセット」するか、他の回答にもあるようにdiv等で囲み、位置指定をすると良いです。