comment aligner verticalement le texte à côté d'une image flottante?

Question

Je veux aligner verticalement une plage après une image flottante ... Je l'ai recherchée dans le débordement de pile et trouver ce post . mais mon image est flottée.

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

Je donne vertical-align:middle à l'image et rien ne change!

Merci

Answer 1

Commencez par enlever float. Écrivez comme ceci:

<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>

Vérifiez ceci http://jsfiddle.net/ws3Uf/

Answer 2

Même s'il s'agit d'un article extrêmement ancien, vous pouvez y parvenir avec 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>

Exemple JsFiddle

Answer 3

Ajouter line-height (égal à la hauteur de l'image):

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

Voir exemple.

Answer 4

Un <span> est un élément en ligne, essayez d’ajouter display:block à l’étendue, donnez-lui la même hauteur que l’image et une hauteur de ligne correspondante. Float il est parti aussi. Cela devrait fonctionner

Answer 5

Vous pouvez aussi changer manuellement

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

Démo

Ou vous pouvez utiliser un table

Answer 6

Vous pouvez faire ce qui suit: 

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