HTMLでブロック要素内のテキストを垂直方向に整列させる方法

Webページ制作において、ボタンやリンクなどのブロック要素内でテキストを垂直方向に中央揃えしたい場面はよくあります。CSSだけでも簡単に実現できるので、本記事では代表的な方法をわかりやすく解説します。

Flexbox（フレックスボックス）を使う方法

公式の仕様に従うなら、対象となる要素（例：<a>タグ）をフレックスコンテナとして宣言し、align-itemsプロパティを使って交差軸（クロス軸）方向、つまり垂直方向にテキストを揃えるのが最も標準的で推奨される方法です。

display: flex;
align-items: center;

display: flex; を指定することで要素がフレックスコンテナになり、align-items: center; によって子要素であるテキストが垂直方向の中央に配置されます。水平方向も同時に中央揃えしたい場合は、justify-content: center; を追加すると便利です。

実装例

a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

このように高さが固定されたリンクやボタンでも、テキストがきれいに中央揃えされます。

旧式の方法（Firefox向け）

かつては古いFirefoxブラウザ向けに、以下のような記述が使われることもありました。

display: -moz-box;
-moz-box-align: center;

ただし、-moz-box は現在では非推奨の古い仕組みであり、モダンブラウザではFlexboxを使用するのが一般的です。新規のプロジェクトでは上記の display: flex; を採用しましょう。

Flexboxの動作イメージ

次の画像は、Flexboxを使用してテキストを垂直方向に整列させた実際の表示例です。

まとめ

ブロック要素内のテキストを垂直方向に整列させたい場合は、display: flex; と align-items: center; の組み合わせが最もシンプルかつ確実な方法です。古いブラウザ対応が必要な特別な事情がない限り、Flexboxを使うことをおすすめします。