画像の横にあるテキストを垂直に配置するには？

なぜ 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>
sodimel
編集された質問 7日 8月 2019 в 9:23
プログラミング
css vertical-alignment
28日 1月 2009 в 9:01
22 ビュー
ソリューション

実際、このケースでは非常に簡単で、画像に垂直方向の配置を適用します。一行で構成されているので、実際に整列させたいのはテキストではなく画像なのです。


<div>

  <span style="">Works.</span>
</div>

FF3でテストしました。

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

.box {
   display: flex;
   align-items:center;
}
<div class="box">

    <span style="">Works.</span>
</div>
patelarpan
編集した答え 26日 4月 2018 в 12:58
解説 (23)

というのも、これを動作させるためには、line-heightをdivの高さに設定する必要があるからです。

Josh Crozier
編集した答え 17日 10月 2013 в 9:40
解説 (2)

あなたはおそらくこれを望んでいるでしょう。

<div>

   <span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>

他の人が提案したように、画像に vertical-align をかけてみてください。

<div>

   <span>Didn't work.</span>
</div>

CSSはうっとうしいものではありません。 あなたがドキュメントを読んでいないだけです。

解説 (3)