web-dev-qa-db-fra.com

Alignement vertical moyen avec la cellule de tableau d'affichage ne fonctionnant pas sur les images

J'essaie d'utiliser l'alignement vertical: milieu d'une mise en page pour centrer verticalement du texte, parfois des images, mais cela ne fonctionne que sur du texte. Quelqu'un peut-il me dire pourquoi? 

HTML:

<div>
    <img src="http://jsfiddle.net/img/logo.png"/>
</div>

<div>
    <span> text </span>
</div>

CSS:

div{
    width:200px;
    height:200px;
    background-color:red;
    display:table;

    margin:10px;
}
img, span{
    display:table-cell;
    vertical-align:middle;
}

http://jsfiddle.net/9uD8M/ J'ai aussi créé un violon

cssvertical-alignmentcss-tables
16
Elaine Marley

Mettez border: 1px solid black sur vos balises img, span, puis inspectez les deux éléments dans le navigateur dev. console. Vous remarquerez que l'étendue par défaut est 100% de la hauteur de son parent, alors que l'image a une hauteur définie (la hauteur de l'image réelle). 

Donc, vous n'alignez pas vraiment verticalement ces éléments par rapport à la div, vous alignez simplement le texte à l'intérieur de l'élément span par rapport à la portée :)

Si vous voulez vraiment utiliser des tables pour le centrage vertical, voici le code correct: http://jsfiddle.net/WXLsY/

(vertical-align et display:table-cell vont sur le parent et vous avez besoin d'une table wrapper dessus)

Mais il y a d'autres façons de le faire (SO a beaucoup de réponses à cette question, utilisez simplement la recherche)

21
nice ass

Voici un moyen de résoudre le problème:

HTML:

<div>
    <span><img src="http://jsfiddle.net/img/logo.png" /></span>
</div>
<div> 
    <span> text </span>
</div>

Placez votre img dans une span, l'image est un élément remplacé, elle ne peut pas contenir de contenu enfant. Par conséquent, l'alignement vertical ne fonctionnera pas.

CSS:

div {
    width:200px;
    height:200px;
    background-color:red;
    display:table;
    margin:10px;
}
span {
    display:table-cell;
    vertical-align:middle;
}

Voir la démo sur: http://jsfiddle.net/audetwebdesign/Fz6Nj/

Il existe plusieurs façons de procéder. Vous pouvez également appliquer display: table-cell à l’élément parent div, mais ce serait une approche différente.

4
Marc Audet

Pour aligner verticalement une image dans une cellule de tableau, vous devez lui donner un affichage bloc.

display: block
margin: 0 auto

la marge: 0 auto consiste à aligner l'image au centre. Si vous voulez que l'image soit alignée à gauche, n'incluez pas ceci. Si vous voulez que l'image soit bien alignée, vous pouvez ajouter:

float: right

Merci, G

0
Gregg Od