未分類

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

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

効かない原因

vertical-align を設定しようとしている要素の display が、inline もしくは table-cell 以外

vertical-alignプロパティはdisplay

  • inline
  • table-cell

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

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

block 要素だと効かない

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

flex の子要素の位置調整に、vertical-alignを使うことはできません。flex の上下の位置調整についてはこちらを確認してください。

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

float している要素は、基本的に左上もしくは右上に詰めるように配置されます。

対処法

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

display が block なら、位置調整をしたい要素の親をdisplay: flexに設定すると、簡単に調整できるようになります。flex の子要素たちは、align-itemsalign-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 を設定したりしてましたが、table 要素を親に持たないのに table-cell にするというのもなんだか微妙な気がしていました。2020年の今では flex を使うのが安定な気がします(※ただし要素内に画像がある時は IE など崩れやすいので注意)。

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

関連記事

Leave a Reply