なぜ vertical-align: middle
が動作しないのでしょうか? でも、vertical-align: top
はちゃんと動作します。
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
実際、このケースでは非常に簡単で、画像に垂直方向の配置を適用します。一行で構成されているので、実際に整列させたいのはテキストではなく画像なのです。
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
FF3でテストしました。
これでフレックスボックスを使ってこの種のレイアウトができるようになりました。
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
あなたはおそらくこれを望んでいるでしょう。
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
他の人が提案したように、画像に vertical-align
をかけてみてください。
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
CSSはうっとうしいものではありません。 あなたがドキュメントを読んでいないだけです。