imgとテキストの上下位置を揃える方法｜vertical-alignの使い方と画像の隙間対策

HTMLで画像（imgタグ）とテキストを横に並べたとき、上下の位置が微妙にズレてしまうことはありませんか？
このページでは、vertical-alignの指定によって画像と文字の高さを揃える方法や、画像同士の隙間をなくす方法を、実際の表示例とともにわかりやすく解説します。
CSSの基本的なプロパティであるvertical-alignの挙動や、flexboxを使ったレイアウト調整のコツも紹介しています。

img要素の画像とテキスト文字の垂直方向を揃える

img要素はデフォルトで「vertical-align: baseline;」が設定されているため、文字を横に並べると文字が下に少しはみ出してしまいます。

この文字が少し下にはみ出る

<div style="border:1px solid #888;">
  <img src="./imgs/0001s.jpg" style="width:80px;height:auto;">
  この文字が少し下にはみ出る
</div>

下端揃え

img要素に「vertical-align: bottom;」を設定すれば下端に揃います。

この文字が下端に揃う

<div style="border:1px solid #888;">
  <img src="./imgs/0001s.jpg" style="vertical-align: bottom;width:80px;height:auto;">
  この文字が下端に揃う
</div>

上端揃え

img要素に「vertical-align: top;」を設定すれば上端に揃います。

この文字が上端に揃う

<div style="border:1px solid #888;">
  <img src="./imgs/0001s.jpg" style="vertical-align: top;width:80px;height:auto;">
  この文字が上端に揃う
</div>

中央揃え

img要素に「vertical-align: middle;」を設定すれば中央に揃います。

この文字が中央に揃う

<div style="border:1px solid #888;">
  <img src="./imgs/0001s.jpg" style="vertical-align: middle;width:80px;height:auto;">
  この文字が中央に揃う
</div>

参考：画像と画像の隙間

img要素を複数並べたときに意図しない隙間ができることがあります。
これはホワイトスペース（タブ、改行、空白など）が統合されて１つのホワイトスペースとなって現れるからです。
CSSの white-space プロパティでホワイトスペースをそのまま表示したり1つに統合することは出来ますが完全に消すことは出来ません。

左の2つの画像の隙間を消したい

<div style="border:1px solid #888;">
  <img src="./imgs/0001s.jpg" style="vertical-align: middle;width:80px;height:auto;">
  <img src="./imgs/0001s.jpg" style="vertical-align: middle;width:80px;height:auto;">
  左の2つの画像の隙間をを消したい
</div>

親要素にdisplay:flex;を指定するのが簡単な方法です。
font-size:0; としても隙間は埋まりますが文字は表示されなくなります。

左の2つの画像の隙間を消したい

<div style="border:1px solid #ccc;display:flex;">
  <img src="./imgs/0001s.jpg" style="vertical-align: middle;width:80px;height:auto;">
  <img src="./imgs/0001s.jpg" style="vertical-align: middle;width:80px;height:auto;">
  <p>左の2つの画像の隙間を消したい</p>
</div>