CSS résout le problème du centrage vertical de hauteur inconnue_CSS/HTML

Sauf indication contraire, le contenu de ce site est créé avec autorisation de partage et est destiné à un usage non commercial. Veuillez respecter le fruit de votre travail.

Titre original : Centrage vertical en CSS

Sous-titre : La solution définitive de Yuhu avec une hauteur inconnue

Traduction : forestgan

Bien qu'il existe la fonctionnalité d'alignement vertical du CSS, il ne peut pas résoudre efficacement le problème de centrage vertical de hauteur inconnue (lorsqu'il y a du texte ou une image de hauteur inconnue dans une balise DIV).

Pour les navigateurs standards tels que Mozilla, Opera, Safari, etc., vous pouvez définir le mode d'affichage de l'élément parent sur TABLE (affichage : table;) et les éléments enfants internes sur table-cell (affichage : table-cell ). La fonctionnalité d'alignement vertical le centre verticalement, mais n'est pas prise en charge par les navigateurs non standard.

Les navigateurs non standard ne peuvent définir l'élément enfant qu'à 50 % du haut, puis placer un élément à l'intérieur avec une distance de -50 % du haut pour le décaler.

CSS
body {padding : 0 ; margin : 0 ;>
body,html{hauteur : 100 %;}
#outer {hauteur : 100 % ; débordement : caché ; position : relative ; width : 100 % ; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: top: 50%;} /* pour l'explorateur uniquement* /
#middle[id] {display : table-cell ; vertical-align : middle ; position : statique;🎜>#inner {position : relative ; top : -50 % ; largeur : 400 px ; marge : 0 auto;} /* pour l'explorateur uniquement */
div.greenBorder {border: 1px solid green; background-color: ivory;}

XHTML

L'avantage du code CSS ci-dessus est qu'il n'y a pas de hacks et qu'il utilise le sélecteur CSS2 #value[id] qui n'est pas pris en charge par IE.

Le sélecteur CSS2 #value[id] est équivalent au sélecteur #value, mais Internet Explorer ne prend pas en charge ce type de sélecteur. De même, .value[class] est équivalent à .value, qui ne peut être lu que par les navigateurs standards.

Test : Firefox1.5, Opera9.0, IE6.0, IE5.0 réussis.