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>