vertical-align:middleが下に微妙にずれる問題

アイコン付きのテキスト等で、vertical-align:middleを中央揃えの為に使用すると微妙に下にずれてしまうことが頻繁にあります。

この原因に関して今回はご紹介したいと思います。

vertical-align:middleの下ズレ問題

例えばこのようなコードを書いたとします。

<style>
  .txt {
    background: gray;
    font-size: 100px;
    line-height: 1.0;
  }
  img.icn {
    vertical-align: middle;
  }
</style>
<!-- icn.pngは10px四方の黒いボックス画像 -->
<p class="txt"><img src="./icn.png" class="icn">テキスト</p>

結果はこのようになります。

画像がすごい下にずれていますね。

実はこれはバグでもなんでもなく、vertical-align:middleの仕様です。

MDNによるとvertical-align:middleの動作は

> 要素の middle を親要素の小文字の middle に揃えます。

と書かれています。

つまり、親要素全体の中央ではなく、小文字の中央に揃えてしまうんですね。

実際に小文字を入力した場合の例が下の画像です。

丁度中央にそろってますね。

フォントサイズが小さかったり、多少画像が下にずれてしまっても問題ない時は気にならないのですが、今回のようにフォントサイズが大きかったりする場合はかなり気になってしまいます。

なので、基本的に自分は以下のように背景画像として指定しています。

<style>
  .txt {
    font-size: 100px;
    line-height: 1.0;
    background: gray url(./icn.png) left center no-repeat;
    padding-left: 15px;
  }
</style>
<p class="txt">XXX</p>

このようにすれば、下画像のように文字の丁度中央に揃えられます。

以上

vertical-alignは簡単なようでかなり複雑なプロパティなので、自分もまだ理解しきっていない部分が多いです。もっと勉強しないといけないですね…

以上、たにっぱでした〜