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
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/
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>
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>
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
Vous pouvez faire ce qui suit:
div:after {
content:"";
clear:both;
display:block;
}