J'essaie d'obtenir plusieurs composants inline
et inline-block
alignés verticalement dans un div
. Comment se fait-il que la span
de cet exemple insiste pour être poussée vers le bas? J'ai essayé à la fois vertical-align:middle;
et vertical-align:top;
, mais rien ne change.
HTML:
<div>
<a></a><a></a>
<span>Some text</span>
</div>
CSS:
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
}
div {
background:yellow;
vertical-align:middle;
}
span {
background:red;
}
RÉSULTAT:
vertical-align
s'applique aux éléments en cours d'alignement, pas à l'élément parent. Pour aligner verticalement les enfants de la div, procédez comme suit:
div > * {
vertical-align:middle; // Align children to middle of line
}
Voir: http://jsfiddle.net/dfmx123/TFPx8/1186/
NOTE: vertical-align
est relatif à la ligne de texte actuelle et non à la hauteur totale du parent div
. Si vous voulez que le parent div
soit plus grand et que les éléments soient toujours centrés verticalement, définissez la propriété line-height
de div
au lieu de height
. Suivez le lien jsfiddle ci-dessus pour un exemple.
Donnez vertical-align:top;
dans a
& span
. Comme ça:
a, span{
vertical-align:top;
}
Vérifiez ceci http://jsfiddle.net/TFPx8/10/
Il suffit de faire flotter les deux éléments pour atteindre le même résultat.
div {
background:yellow;
vertical-align:middle;
margin:10px;
}
a {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}
span {
background:red;
display:inline-block;
float:left;
}