Vertikale Zentrierung in CSS

Vertikale Zentrierung in CSS
Copyright © Jak psát web píše Yuhů, Dušan Janovský
For original English text, go to: http://www.jakpsatweb.cz
Translated by A.Romanova

Yuhus endgültige Lösung mit unbekannter Höhe

Obwohl es eine CSS Eigenschaft Vertical-Align (vertikale Ausrichtung) gibt – funktioniert es nicht wie das Attribut valign in HTML-Tabellen. Es scheint, dass CSS Eigenschaft Vertical-Align nicht alleine dieses Problem lösen kann:

Definitionsproblem

  • es gibt den Bereich (z.B. <div>), dessen Höhe bekannt in der Seite ist
  • ein inneres Objekt (normalerweise einen Langtext in <div>) gibt’s innerhalb des Bereiches, und ich weiß nicht seine Höhe (z.B. weil sein Inhalt von einer Datenbank dynamisch erzeugt wird)
  • Ich will das Objekt vertikal innerhalb des Bereichs zentrieren
  • ohne HTML-Tabellen zu verwenden.

Keine allgemeine Lösung war bekannt bis September 2004. Ich habe es gefunden, gehend nach Hause entlang der Wilson Street.

Zeigen Sie ein Beispiel der Vertikalzentrierung in Ihrem Browser an.

Die Vorstellung

Das Wurzelprinzip der Lösung für Internet Explorer 6, 7 oder Quirks-Modus ist das: das innere Objekt wird in der Hälfte der Bereichshöhe absolut eingestellt. Dann wird durch die Hälfte seiner Höhe herangebracht. Die falsche Interpretation der Höheneigenschaft in älterem Internet Explorer wird hier als eine Eigenschaft angewendet (aufgezählte Höhe wird als eine Basis der Prozentsatz-Höhe von geschachtelten Tags genommen). Ein geschachteltes Extraanhängsel <div> ist erforderlich für jene Forscher.

Die Lösung für Standardbrowser wie Mozilla, Oper, Safari usw. (einschließlich IE 8, 9, 10 und jünger) ist völlig verschieden. Kompletter Bereich (Spitze <div>) wird veranlasst, um als eine Tabelle gezeigt zu werden (Anzeige: Tabelle; ein Teil CSS2). Das innere Objekt wird als Tabellenzelle gesetzt (Anzeige: Tabellenzelle). Jetzt – gibt es die Schlüsselidee – es ist möglich die vertical-align Eigenschaft für solches tabellengezeigtes Element in Standardbrowsern zu verwenden. (Internet Exlorer 6, 7 und Quirks-Modus ignorieren jene Eigenschaften oder wissen ihre Werte nicht.)

Dann sind die beide Syntax gemischt. Ich verwende Pixy Unterstrich Hack, aber mit dem Zeichen #. Eine CSS Eigenschaft, dgeschrieben mit Char # am Start (d. h. #position), ist sichtbar und älter für IE 7. Solche schriftliche Eigenschaft ist unsichtbar für jeden anderen Standardbrowser (z.B. Explorer 6 oder 7 interpretiert #position: absolut; verschieden von anderen Browsern). Das so genannt “Unterstrich-Hack” scheint gültig zu sein, aber wenn Sie es nicht verwenden wollen, dann können Sie die mehr strukturierten Code unten in meinem zweiten Beispiel anwenden (leider funktioniert nicht für IE 7). Andere Browser Typen und Internet Explorer 8 und jünger brauchen nicht gehackt zu werden, weil sie richtig die Anzeige unterstützen: Tabellenzelle.

Kompatibilität

Der Code unter funktioniert in Internet Explorer 5.0, 5.5, 6.0, 7, 8, 9 und 10 Beta, in Gecko-Browsern (Mozilla, Firefox, Netscape 7), in Opera 7, 8 und jedes Chrom, Konqueror 3.3.1. (vielleicht auch niedriger), und in Safari (Win, iOS). Die Seite kann HTML, HTML5 oder XHTML sein, Standard oder Quirks-Modus.

Das gültige Beispiel funktioniert nicht in IE 7 Standardmodus (Aktualisierung 2012: ungefähr 3 % Kunden). Im Falle finden Sie eine leichte Problemumgehung  für IE 7, teilen Sie mir bitte mit.

Verständlicher Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>

<body>
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div style="#position: relative; #top: -50%">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>

Siehe dieses Beispiel im Browser

Erklärung für Farben:

CSS Stile für jeden Browser

CSS Stile für Standardbrowser

CSS Stil nur für Internet Explorer 6, 7 und Quirk (mit # Hack)

Das Resultat sieht aus wie:

 
 
 

jeder Text
jede Höhe
jeder Inhalt, zum Beispiel erzeugt aus DB
alles wird vertikal in den Mittelpunkt gestellt

 

Siehe dieses Beispiel im Browser


Lass uns es strukturell und ohne Hacks machen

(HINWEIS: diese gültige Lösung unten beschrieben funktioniert nicht in Internet Explorer 7 (Standardweise), weil IE7 die Tabellendatei in ,,display” Eigenschaft nicht versteht. Das zentrierte Objekt ist zu hoch. ABER: IE 7 ist nur ungefähr 3 % von Benutzern (2012) benutzt, und die Zahl wird abnehmen. Wenn IE7 Benutzer Sie immer noch stören, verwenden Sie bitte die nichtgültige Lösung von da oben, schreiben Sie in Quirks-Modus, oder verwenden Sie HTML Conditional Comments (konditionale Kommentare) für das Trennen der Eigenschaften für IE 7.)

Das erste Beispiel von da oben ist nicht nett, aber ich hoffe Sie haben es verstanden. Es ist möglich Code verschieden zu schreiben. Beispielweise:

<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>

Und der strukturierte gültige Stil:

<style type="text/css">
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for quirk explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%; position: static;}

#inner {position: relative; top: -50%} /* for quirk explorer only */
/* optional: #inner[id] {position: static;} */
</style>

Siehe das gültige Beispiel im Browser (es sieht dieselbe Weise aus, wie das letzte).

Farblegende:

CSS Stil nur für Internet Explorer 6 (oder Quirk)

CSS Stile für Standardbrowser

CSS2 Selektoren #value [id] entspricht dem Selektor #value, aber Internet Explorer 6 ignoriert diese Typen von Slektoren mit [id]. Allgemein: Syntax *[foo] bedeutet jedes Element mit dem Attribut foo. Jedes HTML-Element #something muss die Attribut-ID enthalten, definitionsgemäß zu “something” eingesetzt. Das liegt daran – #value [id] funktioniert nur in Standardbrowsern (ähnlich works .value[class])

Es gibt CSS Eigenschaftposition eingestellt auf absoluten oder relativen für Internet Explorer. Der Code position: static bekommt es das zurück zum Standardwert in Standardbrowsern (Eigenschaftspitze funktioniert dann nicht).

Sowohl das vertikale als auch horizontale Zentrieren

Der Kern-Code wird derselbe sein, Sie müssen gerade einige Extra-CSS-Regeln dabei hinzufügen. Wenn Ihre Seite in der Standardweise ist, fügen Sie diesen Code hinzu:

<style>
#outer {width: 100%;}
#inner {width: 200px; margin-left: auto; margin-right: auto;}
</style>

Wie Sie wahrscheinlich sehen, ist das die allgemeinste horizontale zentrierte Methode – automatisch linken und rechten Rand. Denn die Ränder Raum in Firefox und Opera brauchen, müssen Sie eine Breite auf #outer div einsetzen. Wenn 100 % Ihre Bedürfnisse nicht passen, verwenden Sie jeden anderen Wert.

Das Wichtigste ist die richtige Breite auf #inner einzusetzen. Dies Lernprogramm ist über die Vertikalzentrierung eines Objektes mit der unbekannten Höhe. Ich nehme an, dass Sie die Objektbreite kennen (in den meisten Fällen bestimmen Sie einfach wie breit es sein sollte). Sie können die Pixel-Werte oder die Prozentsatz-Breite verwenden. Ob das zentrierte Objekt als nur ein Image mit der unbekannten Größe ist, dann brauchen Sie nicht die Breite einzusetzen.

Wenn Sie Quirks-Modus -Seitenübergabe verwenden (wie Sie wissen Modus hängt von !Doctype ab), hinzugefügter Code sollte ein bisschen länger sein, denn Quirks-Modus bei Exploder versteht nicht die automatischen Ränder, aber stattdessen enthält einen netten Programmfehler in der Text-Ausrichtung Interpretation. Dieser Code sollte sowohl für den Standard als auch für den Quirks-Modus funktionieren:

<style>
#outer {width: 100%;}
#middle {width: 100%; text-align: center;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;}
</style>

Beachten Sie bitte auch, dass das gerade ein Teil des Codes ist, den Sie zum vorherigen Beispiel hinzufügen müssen. Im Falle sind Sie faul die Code zusammenzusetzen, siehe bitte das ganze Beispiel im Browser: das vertikale und horizontale Zentrieren. Sie wissen, ich bin auch faul.

Wie soll man vertikal auf die Fensterhöhe zentrieren

Dieselbe Weise, und fügen nur den Stil hinzu<style>
body, html {height: 100%;}
#outer {height: 100%; overflow: visible;} /* or without overflow */
...
</style>
:

Es scheint, dass #outer Deklaration genügend sein sollte, aber es ist nicht. Körper- und HTML-Deklaration setzt 100 % der Fensterhöhe als eine Basis für den folgenden Prozentsatz. Jetzt ist es besser  den Überlauf nicht einzusetzen: verborgen (wie in den Beispielen von da oben), denn wenn der Inhalt höher als das Fenster sein würde, dann würde es unmöglich sein, darauf zu scrollen.

Zusammenhängend

Versuche vertikal zu zentrieren:

10 CSS-Tricks

Einzelne Linienvertikalzentrierung

Vorherige Versuche der Vertikalzentrierung mit CSS (vielen Dank für die Inspiration)

Alles andere Artikel in Tschechisch über diese Website finden an www.jakpsatweb.cz.

Beispiele:

Darüber

Zuerst veröffentlicht am 21. September, 2004, aktualisiert am 23. Okt 2006 und am 25. Mai 2008. Hauptaktualisierung am 6. Dez 2012, einschließlich Bugfix des Codes im gültigen Beispiel. Ob Sie wünschen, werde ich diesen Artikel mit mehr Information aktualisieren.

Autor:

Dušan Janovský
auch bekannt als Yuhů
janovsky@gmail.com
www.jakpsatweb.cz