【html/CSS】aタグを中央寄せする方法

aタグは通常左寄せになっています。これを中央寄せするには一工夫必要です。

aタグ（リンク）を中央寄せする方法を解説します。

aタグをボタンにして中央寄せする方法はこちら↓

aタグを中央寄せする条件

aタグ（リンク）を中央寄せするには下記3つの条件すべてを満たしている必要があります。

↓実装例

<style>
.example{
    text-align: center;
}
</style> 

<div class="example">
    <a href="#">aタグ（リンク）</a>
</div>

1.親要素にtext-align:center

text-alignはテキストの位置を指定するCSSです。

text-align:centerと指定すると中央寄せになります。

2.親要素はブロック要素

text-alignはブロック要素に指定できます。そしてその子要素の位置を調整します。

インライン要素に指定しても効きません。

3.子要素（aタグ）はインライン要素

text-alignはテキストの位置調整ができます。テキストはインライン要素です。

divのようなブロック要素には効きません。

インライン要素、ブロック要素について詳しくはこちら↓

親要素、子要素について詳しくはこちら↓

【まとめ】 aタグ（リンク）を中央寄せする方法

1. 親要素にtext-align:center
2. 親要素はブロック要素
3. 子要素（aタグ）はインライン要素

以上、aタグ（リンク）を中央寄せする方法でした。