Snippet CSS : Centrer du texte en hauteur
Posé ici le vendredi 20 février 2009 à 10:02 par
Il faut le dire, CSS est un langage frustrant et non-abouti. Capable du meilleur comme du pire, les effets paraissant les plus simples peuvent devenir de véritables cauchemars à exécuter. Par exemple, CSS propose une propriété text-align pour centrer du texte horizontalement mais ne prévoit rien pour un centrage vertical.
<div id="myDiv" >
Je veux que cette ligne soit centrée en largeur et hauteur
</div>
Voici une rapide astuce pour centrer plus facilement une ligne de texte en hauteur.
div#myDiv {
border:3px dashed gray;
text-align:center;
/* ça se passe ici */
height:200px;
line-height:200px;
}
Si la valeur de line-height est égale au height, le texte est ainsi centré.
Ce contenu est mis à disposition selon les termes de la licence Creative Commons 2.0 France : Paternité, Pas d'Utilisation Commerciale, Partage des Conditions Initiales à l'Identique.
Context
Trackbacks
0 trackback
Commentaires
5 commentaires
Super astuce.
On se demande toujours comment centrer du texte de manière sûre.
Merci.
1. Par Lionel - Websourcing.fr le vendredi 20 février 2009 à 16:54
Cet astuce est en effet très pratique, seulement si votre texte ne tiens que sur une ligne... en effet si il y a un retour à la ligne il y aura également un écart de 200px entre les 2 lignes, or si le texte provient d'une base de données et que sa longueur est variable cela pose problème.
Sinon félicitation pour votre blog, et vos différents projets qui sont très intéressants ;)
2. Par Gouin Yannick le vendredi 20 février 2009 à 18:21
Bonsoir Yannick,
Oui en effet cette astuce n'est valable que pour une ligne de texte. J'ai bien fait attention de choisir mes mots dans le texte de l'article mais le titre n'est pas précis sur ce fait.
3. Par Jay Salvat le vendredi 20 février 2009 à 18:55
"Capable du meilleur comme dur pire"
Jay, continue avec ce magnifique blog et avec tes super astuces ;)
4. Par D. Carreira le vendredi 20 février 2009 à 22:17
Corrigé. Merci :)
5. Par Jay Salvat le samedi 21 février 2009 à 00:44