ホームへ

【CSS】aタグ(リンク)を中央寄せする方法

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

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

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

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

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

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

↓実装例

<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タグ(リンク)を中央寄せする方法でした。

マンガで読める関連記事