html - リスト内のテキストと画像を垂直方向に配置

Question

リスト内のテキストと画像を垂直方向に揃える方法はありますか?

例えば

<li>Some text here <img src="image.jpg" alt="" /></li>

テキストが画像の中央に配置されず、下部に表示され、画像がその横に表示されます。側面の画像の間の中心点にテキストが必要です。

それを行う最良の方法は何ですか？リスト内に画像を含めることは有効な HTML ではないことを知っています (AFAIK)。

ありがとう ：）

Answer 1

使用できます

li img {vertical-align: middle;}

テキストが 1 行に収まる場合

Answer 2

テキストが折り返されない場合は、画像の高さと同じ line-height を設定できます。

li { line-height: 42px }

そして、はい、（デフォルトで）インライン要素であり、ブロックレベル要素であるため、img内部を持つことliは完全に有効です。imgli