Comment centrer verticalement des images sur une ligne?

Quel est le meilleur moyen de centrer les icônes sur une ligne lorsque les images sont plus petites que la hauteur de ligne?Comment centrer verticalement des images sur une ligne?

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

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

Here's a jsFiddle example. Cet exemple montre également pourquoi vertical-align: middle ne fonctionne pas.

Je veux que l'img soit centré par rapport au texte de la div. C'est-à-dire que même si le texte était entouré de plusieurs lignes, l'image serait centrée sur une seule ligne. Idéalement, la solution n'impliquerait pas de définir des marges/rembourrages sur l'image et fonctionnerait même si je ne connaissais pas la hauteur de ligne.

choses que j'ai lu:

How do I vertically align text next to an image with CSS? (traite le cas où l'image est plus grande, ne semble pas appliquer ici)

Understanding vertical-align

Source

2010-06-15 Jeremy Kauffman

Quel est le problème avec la solution spécifiée dans les liens auxquels vous faites référence? L'utilisation de '' devrait fonctionner aussi bien lorsque l'image est plus petite que la hauteur de ligne. –

J'ai peut-être manqué quelque chose ici, mais ce que vous avez semble aligner verticalement comme il est: 'http: // jsfiddle.net/JrFkE /' – edl

J'ai ajouté un violon qui montre les problèmes avec ces deux approches. –

La cause de votre problème est que l'image est centrée verticalement par rapport au x-height du texte environnant. Cela peut être vu 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 quelle que soit la hauteur taille de la police ou de la ligne que vous utilisez. Donc, dans un sens typographique, l'image est réellement alignée verticalement. Cependant, si vous souhaitez ajuster l'alignement afin que le centre de l'image est plus proche de la ligne moyenne, il suffit de déplacer un peu vers le haut avec margin-bottom:

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

La valeur de 0,25 em est plutôt arbitrairement choisi , basé sur ce qui semblait bien quand je l'ai essayé. Ajuster librement selon le goût. Il s'agit de a comparison before and after the margin-adjustment, avec différentes tailles de police.

Source

2010-06-15 20:10:51

+1 J'ai toujours été coincé dans ce problème (images en ligne avec du texte). C'est une vraie solution. Thanx @Wieslander – shashwat

supplémentaire: img devrait aligner verticalement: bas, et fond de fusion: (hauteur de ligne - hauteur de l'image)/2 – linjunhalida

Pourquoi ne vous définissez pas l'image fond de l'élément div? I.e .:

<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 comme ça que je ferais.

Cordialement

Source

2010-06-15 18:53:36

Ce n'est pas une mauvaise idée, mais dans ce cas, les images sont en réalité des sprites (par exemple quelque chose comme ) plutôt que des balises img, donc cela ne fonctionnera pas. –

@jeremy: Alors pourquoi utilisez-vous une balise 'img' dans votre question? – jeroen

Simplification.Cette solution nécessite également de régler manuellement les distances, ce que j'espérais éviter. Si je change la taille du texte ou la hauteur de la ligne, je dois réajuster la position de l'image. –

Essayez de faire des parents contenant display: table et display: table-cell. Après cela, vertical-align: middle devrait fonctionner de "façon de table".

Source

2010-06-15 19:19:30 vtambourine

Cela ne fonctionne pas dans IE7 et plus tôt, qui malheureusement existent toujours. –

Comment centrer verticalement des images sur une ligne?

Répondre

Questions connexes