2022-08-11

CSS: aタグ（リンク）を中央寄せにする

aタグ（リンク）はインライン要素なので、 aタグを中央寄せにしたい場合は、 親要素に対してCSSで「text-align: center;」を指定します。
aタグに対して中央寄せのCSSを指定しても機能しないので注意が必要です。

中央寄せにする方法

aタグを「pタグ」又は「divタグ」で囲みます。 ここでは例としてdivタグを使用します。
この時にclassを指定します。 クラスで限定しておかないと、 すべてのdiv要素が中央寄せになってしまうからです。

HTMLとCSSは次のようになります。

<div class=center"><a href="">アンカーリンク</a></div>

div.center {
	text-align: center;
}

次のようにaタグ（リンク）が真ん中に表示されます。

複数のaタグを中央寄せにする

リスト形式になっている複数のaタグ（リンク）も中央寄せになります。

<div class="center">
<ul>
	<li><a href="">アンカーリンク1</a></li>
	<li><a href="">アンカーリンク2</a></li>
	<li><a href="">アンカーリンク3</a></li>
</ul>
</div>

div.center {
	text-align: center;
}

次のように表示されます。