Comment centrer verticalement des Images sur une ligne?

Quelle est la meilleure façon de centrer les icônes sur une ligne lorsque les images sont plus petites que la hauteur de la ligne?

Par exemple (modèles en ligne pour faciliter la lecture):

<div style="line-height: 20px">
  <img style="width: 12px; height: 12px;"/>
  Blah blah blah
</div>

voici un exemple de jsFiddle . Cet exemple montre aussi pourquoi vertical-align: middle ne fonctionne pas.

je veux que l'img soit centré contre le texte du div. C'est, même si le texte est renvoyé à plusieurs lignes, l'image serait centré sur une seule ligne. Idéalement, la solution n'impliquerait pas la mise en place de margages/paddings sur l'image et fonctionnerait même si Je ne connaissais pas la ligne-hauteur.

choses que j'ai lues:

comment aligner verticalement un texte à côté d'une image avec CSS? (traite du cas où l'image est plus grande, ne semble pas s'appliquer ici)

Understanding vertical-align

26
demandé sur Community 2010-06-15 22:18:35
la source

3 ответов

la cause de votre problème est que l'image est verticalement centrée par rapport au x-height du texte environnant. Cela se voit très clairement sur une capture d'écran agrandie où le baseline et mean line du texte environnant est inclus:

illustration of a vertically aligned image compared to the surrounding text's baseline and mean line

l'image est alignée de la même façon peu importe la taille de la police ou la hauteur de la ligne vous utiliser. Ainsi, dans un sens typographique, l'image est en fait correctement aligné verticalement . Cependant, si vous souhaitez ajuster l'alignement de sorte que le centre de l'image soit plus proche de la ligne moyenne, il suffit de la déplacer un peu vers le haut en utilisant margin-bottom :

img.icon {
    margin-bottom: 0.25em;
}

la valeur de 0.25 em est assez arbitrairement choisie, basée sur ce qui paraissait bon quand je l'ai essayé. Ajuster librement selon les goûts.

Voici une comparaison avant et après l'ajustement de marge , avec différentes tailles de police.

30
répondu Pär Wieslander 2014-12-29 17:16:17
la source

Pourquoi ne pas définir une image comme arrière-plan de l'élément div? C'est-à-dire:

<div style="line-height: 20px; background: url(path/image.gif) 5px 5px; no-repeat; padding-left: 40px;">
  Blah blah blah
</div>

cela positionnera l'image en haut à gauche. Au moins c'est comment je ferais.

concerne

4
répondu Nik Chankov 2010-06-15 22:53:36
la source

Essayer de rendre les parents conteneur display: table et display: table-cell . Après cela vertical-align: middle devrait fonctionner"de manière de table".

3
répondu vtambourine 2010-06-15 23:19:30
la source

Autres questions sur html css alignment vertical-alignment