CSS löst das Problem der vertikalen Zentrierung unbekannter Höhe_CSS/HTML

Soweit nicht anders angegeben, werden die Inhalte dieser Website mit Freigabegenehmigung erstellt und sind für die nichtkommerzielle Nutzung bestimmt. Bitte respektieren Sie die Früchte Ihrer Arbeit.

Originaltitel: Vertical Centering in CSS

Untertitel: Yuhus ​​endgültige Lösung mit unbekannter Höhe

Übersetzung: Waldgan

Obwohl es die vertikale Ausrichtungsfunktion von CSS gibt, kann sie das Problem der vertikalen Zentrierung unbekannter Höhe (wenn ein DIV-Tag Text oder Bild unbekannter Höhe enthält) nicht effektiv lösen.

Für Standardbrowser wie Mozilla, Opera, Safari usw. können Sie den Anzeigemodus des übergeordneten Elements auf TABLE (Anzeige: Tabelle;) und der internen untergeordneten Elemente auf Tabellenzelle (Anzeige: Tabellenzelle) festlegen ). Die Funktion „Vertikale Ausrichtung“ sorgt für eine vertikale Zentrierung, wird jedoch von nicht standardmäßigen Browsern nicht unterstützt.

Nicht standardmäßige Browser können das untergeordnete Element nur so einstellen, dass es 50 % von oben entfernt ist, und dann ein Element mit einem Abstand von -50 % von oben darin einfügen, um es zu versetzen.

CSS
body {padding: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hide; Breite: 100 %; Hintergrund: Elfenbein; /
#middle[id] {display: table-cell; Vertical-align: middle; position: static;}
#inner {position: relative;width: 400px;margin: 0 auto;} /* nur für Explorer */
div.greenBorder {border: 1px solid green;}

XHTML

Der Vorteil des oben genannten CSS-Codes besteht darin, dass es keine Hacks gibt und er den CSS2-Selektor #value[id] verwendet, der vom IE nicht unterstützt wird.

Der CSS2-Selektor #Wert[id] entspricht dem Selektor #Wert, Internet Explorer unterstützt diesen Selektortyp jedoch nicht. Ebenso entspricht .value[class] .value, das nur von Standardbrowsern gelesen werden kann.

Test: Firefox1.5, Opera9.0, IE6.0, IE5.0 bestanden.