イメージとスパンを含む div があります。スパン内のテキストを画像の中央に配置したいと思います。当然、便宜上フィドルを作成しました。
HTMLは次のとおりです。
<div id="legend">
<img src="http://fate.holmes-cj.com/plus.png"/>
<span> * 5</span>
</div>
ここに私が試したことのいくつかがあります：
span {vertical-align:middle;}何もしないようです。span {vertical-align:top;}テキストを画像の上部に揃えます。うまくいけばtop、そうなると思うでしょうmiddle。span {vertical-align:20px;}私が欲しいものを与えてくれますが、それは div の高さ、画像の高さ、およびフォント サイズに依存します (そして相互作用します)。- 追加
display:table-cellはSOの他の場所で提案されていますが、Chromeでは何もしないようです.
この問題は、私のFate Dice Rollerのコンテキストで見ることができます。「ロール」を数回クリックしてから、ヒストグラムにマウスを合わせます。サイコロを振るときちんとした統計が表示されますが、テキスト部分がずれています。
ここで運が悪かっただけですか、それとも垂直方向の配置は本当にこれほど厄介なはずですか? フォントサイズを変更するときに微調整する必要のないソリューションが大好きです。