☰

画像の横にテキストを垂直に揃えるには？質問する

tag-icon • tag-icon html css alignment vertical-alignment
画像の横にテキストを垂直に揃えるには？質問する

なぜvertical-align: middle機能しないのでしょうか? それでも、機能vertical-align: top します。

span{
  vertical-align: middle;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

ベストアンサー1

実際のところ、この場合は非常に簡単です。画像に垂直方向の配置を適用するだけです。すべてが 1 行になっているため、配置したいのはテキストではなく画像です。

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>

FF3でテスト済み。

これで、このタイプのレイアウトに flexbox を使用できるようになりました。

.box {
   display: flex;
   align-items:center;
}
<div class="box">
    <img src="https://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>

おすすめ記事