インライン要素のテキストを上下中央よせする方法

HTML/CSS

aタグで実装されたボタンなど、高さのあるインライン要素でテキスト（コンテンツ）を上下中央よせする方法について紹介します。

Flexbox化し、『align-items: center』を適用する

インライン要素にdisplay: flexを適用してコテンツをFlexアイテムにし、align-items: centerで上下中央寄せする方法です。具体例は以下の通りです。
なお、Flexboxの詳細解説はFlexboxの概要と使いどころで紹介しています。

<span class="item">item</span>


.item {
  display: flex;
  width: 200px;
  height: 100px;
  align-items: center;
  background: lightgreen;
}

See the Pen
inline-vertical-center-flexbox by Toshiharu Nishina (@nishina555)
on CodePen.

ブロックレベル要素化し、上下均等なpaddingを確保する

display: inline-blockを適用し、上下に同じ幅のpaddingを持たせることで上下中央寄せにする方法です。
上下にpaddingが確保できればよいので、displayの値はflexやblockでも問題ありません。具体例は以下の通りです。

<span class="item">item</span>


.item {
  display: inline-block;
  width: 200px;
  padding: 45px 0;
  background: lightgreen;
}

See the Pen
inline-vertical-center-padding by Toshiharu Nishina (@nishina555)
on CodePen.

参考: 『要素の高さ = フォントサイズ + 上下padding』にするためには『line-height: 1』を追加する

上下paddingで要素の高さを確保する場合、『要素の高さ = テキストの高さ + 上下padding』となります。

テキストの高さは『フォントサイズ + 行間(テキスト上下の余白)』で構成されています。
line-height: 1を適用することで『行ボックスの高さ = フォントサイズ』となるため、テキストに行間がない状態になります。

その結果、『要素の高さ = フォントサイズ + 上下padding』という式が成立します。

line-height: 1を適用したケースと適用していないケースの違いは以下の通りです。

<div class="container">
  <span class="with-line-height">1</span>
</div>

<div class="container">
  <span>1</span>
</div>


.container {
  /* widthの初期値をコンテンツ幅にするため、Flexコンテナで囲み、Flexアイテム化している */
  display: flex;
  margin-bottom: 10px;
}

span {
  display: block;
  padding: 12px;
  background: lightgreen;
}

.with-line-height {
  line-height: 1;
}

See the Pen
line-height-example by Toshiharu Nishina (@nishina555)
on CodePen.

relative/absoluteによる中央寄せを利用する

インライン要素をブロックレベル要素で囲い、親要素をrelative・インライン要素をabsoluteとすることで上下中央よせを実現する方法です。

absoluteとrelativeを利用した上下左右の中央よせ方法で紹介した通り、relative/absoluteを利用した中央よせには『marginプロパティを利用する方法』と『transformプロパティを利用する方法』の2つがあります。
このうちの『transformプロパティを利用する方法』を利用することで上下中央よせになります。具体例は以下の通りです。

<div class="container">
  <span class="item">item</span>
<div>


.container {
  position: relative;
  width: 200px;
  height: 100px;
  background: lightgreen;
}

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

See the Pen
inline-vertical-center-absolute by Toshiharu Nishina (@nishina555)
on CodePen.

なお、擬似要素before/afterを利用すると以下のように書き換えられます。擬似要素before/afterの詳細解説は擬似要素before/afterの概要と具体例で紹介しています。

<span class="item"></span>


.item {
  display: block;
  position: relative;
  width: 200px;
  height: 100px;
  background: lightgreen;
}

.item::after {
  content: 'item';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

See the Pen
Untitled by Toshiharu Nishina (@nishina555)
on CodePen.

table-cell化し、『vertical-align: middle』を適用する

table-cellの要素に対してvertical-align: middleを適用すると上下中央寄せになる特性を利用した方法です。

インライン要素をブロックレベル要素で囲い、親要素にdisplay: table・インライン要素にdisplay: table-cellを適用します。具体例は以下の通りです。

<div class="container">
  <span class="item">item</span>
</div>


.container {
  display: table;
}

.item {
  display: table-cell;
  width: 200px;
  height: 100px;
  vertical-align: middle;
  background: lightgreen;
}

See the Pen
inline-vertical-center-table-cell by Toshiharu Nishina (@nishina555)
on CodePen.

ブロックレベル要素化し、line-heightで高さを確保する

display: inline-blockを適用し、line-heightで高さの確保とコンテンツの上下中央寄せを実現する方法です。高さを指定できればよいのでdisplayの値はflexやblockでも問題ありません。具体例は以下の通りです。

<span class="item">item</span>


.item {
  display: inline-block;
  width: 200px;
  line-height: 100px;
  background: lightgreen;
}

See the Pen
inline-vertical-center-line-height by Toshiharu Nishina (@nishina555)
on CodePen.

なお、コンテンツの行が増えるごとにline-heightによる高さが追加されるので注意が必要です。

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考資料

RECOMMEND