1. ホーム
  2. html

[解決済み] 画像の横のテキストを縦に揃える?

2022-03-17 23:18:03

質問

なぜ 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行で完結しているので、整列させたいのはテキストではなく画像なのです。

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60">
  <span style="">Works.</span>
</div>

FF3でテストしています。

これで、この種のレイアウトにフレックスボックスが使えるようになりました。

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