フローティングイメージの横にあるテキストを垂直方向に配置する方法

Question

フロートした画像の後にスパンを垂直に揃えたいのですが。私はそれをスタックオーバーフローで検索し、 この投稿 を見つけました。しかし、私のイメージは浮いています。

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle">Doesn't work.</span>
</div>

vertical-align:middle画像に変更なし。

ありがとう

Answer 1

まず、floatを削除します。このように書きます：

<img style="width:30px;height:30px;vertical-align:middle" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg">
    <span>Doesn't work.</span>

これをチェックしてください http://jsfiddle.net/ws3Uf/

Answer 2

これは非常に古い投稿ですが、Flexboxを使用してこれを達成できます。

div {
 display: flex;
 align-items: center;
}

<div>
<img style="width:30px;height:30px;" src="http://lorempixel.com/output/abstract-q-c-640-480-8.jpg" />
<span>Doesn't work.</span>
</div>

JsFiddleの例

Answer 3

追加 line-height（画像の高さに等しい）：

<div>
    <img style="width:30px;height:30px; float:left">
    <span style="vertical-align:middle; line-height: 30px;">Works!</span>
</div>

例を参照してください

Answer 4

<span>はインライン要素です。スパンにdisplay:blockを追加して、画像と同じ高さと、一致する行の高さを指定してください。そのまま浮​​かせます。それはうまくいくはずです

Answer 5

手動で変更することもできます

<div>
    <img style="width:30px;height:30px float:left">
    <span style="float:left;padding-top:15px;">Will work.</span>
</div>

デモ

または、 table を使用できます

Answer 6

次のことができます。

  div:after {
        content:"";
        clear:both;
        display:block;
    }