Salut,
Freez a écrit :
Pour ce qui est du centrage vertical du texte à l'intérieur de l'élément, vous pouvez mettre une hauteur de ligne strictement équivalente à la hauteur de l'élément, ou bien mettre un padding top et bottom identique.
La solution de la hauteur de ligne n'est pas pratique s'il y a plus d'une ligne ou que le texte censé tenir sur une ligne passe à la ligne en cas d'agrandissement de la taille de police.
Greg_Lumiere a écrit :
Le style appliqué dans le Html fait barrage. En l'ôtant le container prend la hauteur du contenu en gardant la largeur de la page.
Voyez-vous même sur cet exemple CodePen
Sauf que le texte cesse d'être centré verticalement dans l'exemple CodePen rapporté.
Quant à display: table-cell, il permet, effectivement, de centrer verticalement du texte. Cependant, un élément se voyant appliquer une déclaration display: table-cell n'aura pas de marges, ce qui explique pourquoi le bloc cesse d'être centré.
Pour centrer le bloc tout en centrant le texte verticalement, la solution la plus simple est de recourir au
modèle de boîte flexible de CSS 3 (le module flexbox, pour les intimes), les seuls inconvénients étant que ce module CSS 3 n'est pas pris en charge par les versions d'IE antérieures à la 10, d'une part, et que, d'autre part, le code CSS peut être chargé, étant donné que la syntaxe de ce module a évolué au fil des temps et que les navigateurs ne prennent pas tous en charge la syntaxe actuelle, avec ou sans préfixe (enfin, cela dépend des versions de navigateur à prendre en compte). Pour illustrer le propos :
<div id="container">
<div class="pupTitle">Ténors</div>
</div>
.pupTitle {
/* On applique le comportement d'une boîte flexible selon le module flexbox */
display: -webkit-flex; /* Safari a encore besoin du préfixe */
display: -ms-flexbox; /* Pour IE 10, qui prend en charge une ancienne syntaxe */
display: flex; /* Pour Google Chrome, Opera et Firefox dernières versions, ainsi que pour IE 11 */
/* On centre horizontalement le contenu de la boîte flexible (dans ce contexte, text-align devient superflu) */
-webkit-justify-content: center; /* Safari a encore besoin du préfixe */
-ms-flex-pack: center; /* Pour IE 10, qui prend en charge une ancienne syntaxe */
justify-content: center; /* Pour Google Chrome, Opera et Firefox dernières versions, ainsi que pour IE 11 */
/* On centre verticalement le contenu de la boîte flexible (dans ce contexte, vertical-align devient superflu) */
-webkit-align-items: center; /* Safari a encore besoin du préfixe */
-ms-flex-align: center; /* Pour IE 10, qui prend en charge une ancienne syntaxe */
align-items: center; /* Pour Google Chrome, Opera et Firefox dernières versions, ainsi que pour IE 11 */
}
Soit dit en passant, PapyJP, la bonne syntaxe du doctype XHTML 1.0 transitionnel est la suivante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
D'ailleurs, pourquoi ne pas carrément employer le doctype HTML 5, bien plus simple à mémoriser ?
