White Space
WebLife

【CSS】vertical-align が効かない時の対処法

  • CSS

vertical-alignは上下の配置を設定するためのものですが、text-alignと違い少し使い方に癖があります。

中央寄せ（vertical-align: middle）したいのにできない、というシーンがよくみられる気がします。

効かない原因

（1）vertical-align を設定しようとしている要素の display が inline / table-cell 以外になっている

vertical-alignプロパティは、設定しようとしている要素のdisplayが

  • inline
  • inline-block
  • inline-flex
  • table-cell

上記でないと設定できません。いわゆる「インライン要素」である必要があります（table-cellはちょっと特殊ですが、td や th タグのデフォルトの display です）。

ディベロッパーツールを使って、設定しようとしている要素のdisplayを確認してみましょう。

F12 で起動 > タブ「Elements」> HTMLソースコードパネルから確認したい要素をクリック > タブ「Computed」> display プロパティを確認

block 要素だと効かない

（2）vertical-align を設定しようとしている親要素が display flex になっている

display: flexを親に持つ要素は、「フレックスアイテム」という特殊なな要素になります。フレックスアイテムに対して、vertical-alignを設定することはできません。

たとえ要素に当たっているdisplayがinlineであったとしても、親要素の display が flex であればフレックスアイテムになってしまいます。

ですが、フレックスアイテムの上下の位置はalign-itemsなどを使ってコントロールすることができます。flex の上下の位置調整についてはこちらを確認してください。

（3）要素に float が設定されている

float している要素（もしくは float の影響を受けている要素）は、基本的に左上、もしくは右上に詰めるように配置されます。そのためvertical-alignは無視されます。

対処法

そもそも verticla-align を使わない

display が block なら、位置調整をしたい要素の親をdisplay: flexに設定すると、簡単に調整できるようになります。flex の子要素たちは、align-itemsとalign-selfを使って上下の位置を設定します。

  • align-items … 親要素に設定する。子要素全ての上下位置を調整する。
  • align-self … 子要素に設定する。個別に上下位置を調整する。

また、設定できるプロパティの値はどちらも同じです。

例：子要素の位置をまとめて設定する

.box配下の要素をまとめて同じ位置に調整する方法です。

HTML
<div class="box">
  <p>要素</p>
  <p>要素</p>
</div>
CSS
.box {
  display: flex;
  align-items: center;
}
  • center … 中央寄せ

例：子要素の上下位置をそれぞれ個別に設定する

.box配下の要素をそれぞれ個別に位置調整する方法です。align-selfを子要素に設定することで調整できます。

HTML
<div class="box">
  <p class="align-start">要素</p>
  <p class="align-end">要素</p>
</div>
CSS
.box {
  display: flex;

}
.align-start {
  align-self: flex-start;
}
.align-end {
  align-self: flex-end;
}
  • flex-start … 上寄せ
  • flex-end … 下寄せ

さいごに

display flex が登場するまでは、要素を中央配置したいとき table-cell を親要素に設定して vertical-align を設定することで対応したり、position absolute を使ったりしていました。

ですが、2020年の今では flex を使うのが安定な気がします（※ただし要素内に画像がある時は IE など崩れやすいので注意）。

また、ディベロッパーツールの Computed をしっかりと見て、今要素に何のスタイルが当たっているのか確認していきましょう。