vertical-alignが効かない人は多分勘違いしている

知らなくても大丈夫(個人比)なプロパティですが、モヤモヤしている人は多いと思うので、今回はvertical-alignの解説です。

私がcss独学を初めた当時、あちこちのサイトに
「text-align: centerは水平方向の中央寄せ、vertical-align:middleは垂直方向の中央寄せ」と書いてありました。同じように学んだ人も多いと思います。

それが誤解の元凶です。

vertical-alignが効かないと思っている人は半数ぐらいがこの勘違いが理由なんじゃないかと思っています。

vertical-alignは、正確には「垂直方向の整列に使うプロパティ」です。
”整列” ということは、基本的に対象は複数じゃないと意味がないということです。(一部除く)

vertical-alignの働き方と、「top,middle,bottom,baseline」だけじゃない値について説明していきます。

vertical-alignはインライン要素またはセル要素の整列を行う

vertical-alignは、インライン要素tableのセル要素に対して働きます。

こう書くとtext-alignと似ているように見えますが、text-alignの場合「ブロックレベル要素」に指定することで、テキストやインライン要素が左右中に配置されますが、vertical-alignは「インライン要素(またはtableセル)」に指定します。

継承しないので、div やpなどのブロックレベル要素にvertical-alignを指定しても無効です。

p{
  text-align: center;
}

は有効ですが、

p{
  vertical-align: middle;
}

は無効ということです。

兄弟要素との相対的な位置に配置される

たとえば

<div style="height: 300px;">
  <img src="xxxx.jpg">;
</div>
img{
  vertical-align: middle;
}

とあると、高さ300pxの親要素の中央に画像が配置されそうなものですが、残念ながらなりません。

この場合は、divにdisplay: table-cellとvertical-align: middle を指定することで期待に応えられると思います。

まぁ現代にはflexがあるので、vertical-alignを使わずに

div{
 display: flex;
 align-items: center;
}

の方が良いと思いますが。参考:flexレイアウト その2

vertical-alignは兄弟要素の整列の為に使います。

例として、vertical-alignなしで画像にspanとaタグ(すべてインライン要素)を足してみます。

<div>
  <a href="#">リンク</a>
  <img src="xxxx.jpg">
  <span>SPAN</span>
</div>

各要素はbaselineにそって配置されています。
ここに、 img{ vertical-align: middle ;} を加えるとこうなります。

3つのインライン要素が中央揃いで整列したのが分かると思います。親要素に対して中央に揃うわけではありません

vertical-alignは数値や%でも指定できる

先ほど見たとおり、vertical-alignの初期値はbaselineで、親要素からの継承はしません。

よく使われる値は「top」「middle」「bottom」ですが、他にも「text-top」「text-bottom」、数値、%で指定することができます。

topとtext-top。bottomとtext-bottomの何が違うのか分かりにくいと思いますので比較で両方載せておきます。

span{ vertical-align: top}

SPAN

span{ vertical-align: text-top}

SPAN

top bottom は他要素の絶対的な高さに対する位置に配置されるのに対して、text-top・text-bottomは他テキスト要素を基準としたtop・bottomになります。

vertical-alignの初期値はbaseline(画像でいえばbottomの位置)なので、例のtext-topも画像のbottomにあわせて配置されています。もし画像にvertical-align:middleが設定されれば、text-topを指定されているSPANも連動して画像中央の位置に配置されることになります。

数値はbaselineからの距離。%はline-heightに対する比率

数値や%指定を使うと、指定した要素の位置だけ上下にずらすことができます。横並びにしたアイコンとテキストが微妙にずれているときなどに便利です。

vertical-align: 50px; のように数値で指定した場合は、baselineを基準に上向きに配置されます。(数値がマイナスの場合は下向き)

span要素にvertical-align:-40px”を指定

SPAN

%指定も同じくbaseline基準で上下に動かしますが、「vertical-alignを指定した要素のline-heightに対する%」であって、親要素の高さとは関係ありませんので注意が必要です。

個人的には、こんな面倒くさいプロパティはあまり使いたくないので、本文にも出てきたdisplay : flex で、align-itemsや align-selfプロパティで処理してしまいます。

flexで微妙にalign-items が1,2pxずれているときはvertical-align で整えてあげるぐらいでです。

このvertical-alignの記事、全体の中でも割とアクセス数多い方なのですが、翻って、それほど多くの人がvertical-alignに悩まされているのかと思うと、罪深いプロパティだなと思う次第です。

タイトルとURLをコピーしました