J'ai un élément div qui contient du texte, et je veux aligner le contenu de cette div verticalement au centre.
Voici le style de mon élément div :
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}
<div id="box">
Lorem ipsum dolor sit
</div>
Quelle est la meilleure façon de procéder ?
Vous pouvez essayer cette approche de base :
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}
<div>
Hello World!
</div>
Cela ne fonctionne que pour une seule ligne de texte cependant, parce que nous définissons la hauteur de la ligne à la même hauteur que l'élément box contenant.
Voici une autre façon d'aligner le texte verticalement. Cette solution fonctionne pour une seule ligne et pour plusieurs lignes de texte, mais elle nécessite toujours un conteneur de hauteur fixe :
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>
La CSS se contente de dimensionner le <div>
, d'aligner verticalement au centre le <span>
en fixant la hauteur de ligne du <div>
égale à sa hauteur, et de faire du <span>
un bloc inline avec vertical-align : middle
. Ensuite, il rétablit la hauteur de ligne normale pour le <span>
, afin que son contenu s'écoule naturellement à l'intérieur du bloc.
Et voici une autre option, qui peut ne pas fonctionner sur les anciens [navigateurs qui ne supportent pas display : table
et display : table-cell
][5] (en gros, juste Internet Explorer 7). À l'aide de CSS, nous simulons le comportement d'un tableau (puisque les tableaux prennent en charge l'alignement vertical), et le HTML est le même que celui du deuxième exemple :
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
Cette technique utilise un élément positionné de manière absolue en fixant le haut, le bas, la gauche et la droite à 0. Elle est décrite plus en détail dans un article de Smashing Magazine, [Absolute Horizontal And Vertical Centering In CSS][3].
[3] : http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ [5] : http://caniuse.com/css-table
Vous pouvez facilement le faire en ajoutant le morceau de code CSS suivant :
display: table-cell;
vertical-align: middle;
Ainsi, votre CSS ressemble finalement à :
#box {
height: 90px;
width: 270px;
background: #000;
font-size: 48px;
font-style: oblique;
color: #FFF;
text-align: center;
margin-top: 20px;
margin-left: 5px;
display: table-cell;
vertical-align: middle;
}
<div id="box">
Some text
</div>
Pour une seule ligne de texte (ou un seul caractère), vous pouvez utiliser cette technique :
Elle peut être utilisée lorsque #box
a une hauteur non fixe, relative en %.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
Voir une démonstration en direct [à JsBin][1] (plus facile de modifier le CSS) ou [JsFiddle][2] (plus facile de modifier la hauteur du cadre de résultat).
Si vous voulez placer le texte intérieur en HTML, et non en CSS, alors vous devez envelopper le contenu du texte dans un élément inline supplémentaire et modifier #box::after
pour qu'il corresponde. (Et, bien sûr, la propriété content:
doit être supprimée).
Par exemple,
<div id="box"><span>TextContent</span></div>
.
Dans ce cas, #box::after
doit être remplacé par #box span
.
Pour la prise en charge d'Internet Explorer 8, vous devez remplacer ::
par :
.
[1] : http://jsbin.com/ipujIyeM/2/edit?html,css,output [2] :