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

リンクを中央寄せにすることで、ページの視覚的なバランスを取りたい場合があります。

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

中央寄せにする方法

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

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

HTML
<div class="center"><a href="">アンカーリンク</a></div>
CSS
div.center {
	text-align: center;
}

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

アンカーリンク

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

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

HTML
<div class="center">
<ul>
	<li><a href="">アンカーリンク1</a></li>
	<li><a href="">アンカーリンク2</a></li>
	<li><a href="">アンカーリンク3</a></li>
</ul>
</div>
CSS
div.center {
	text-align: center;
}

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

HTML・CSS入門