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