Mehrere Methoden zum vertikalen Zentrieren von Divs

Autor：Eve Cole Aktualisierungszeit：2025-01-09 10:59:01

Wenn man über dieses Problem spricht, fragen sich manche vielleicht: Gibt es in CSS nicht ein Vertical-Align-Attribut, um die vertikale Zentrierung festzulegen? Auch wenn einige Browser dies nicht unterstützen, muss ich nur ein wenig CSS erstellen

Hack-Technologie reicht! Deshalb muss ich hier ein paar Worte sagen. Es gibt zwar ein Vertical-Align-Attribut in CSS, aber es kommt nur für Elemente vor, die das Valign-Attribut im (X)-HTML-Element haben.

Effektiv, wie z. B. <td>, <th>, <caption> usw. in Tabellenelementen wie <div> und <span> verfügen nicht über die Valign-Funktion, daher kann Vertical-Align nicht für sie verwendet werden.

Wirkung.

Verwandtes Tutorial: N Möglichkeiten, Div horizontal zu zentrieren

1. Einreihige vertikale Zentrierung

Wenn sich in einem Container nur eine Textzeile befindet, ist es relativ einfach, diese zu zentrieren. Wir müssen lediglich die tatsächliche Höhe auf die Höhe der Zeilenhöhe einstellen.

wie:

div {
Höhe:25px;
Zeilenhöhe:25px;
Überlauf:versteckt;
}
Dieser Code ist sehr einfach. Die Einstellung overflow:hidden wird später verwendet, um zu verhindern, dass der Inhalt den Container überschreitet oder einen automatischen Zeilenumbruch verursacht, sodass der vertikale Zentrierungseffekt nicht erreicht werden kann. Mehr CSS-Lehre

Verfahren.

2. Vertikale Zentrierung mehrerer Textzeilen unbekannter Höhe

Wenn die Höhe eines Inhalts variabel ist, können wir die letzte im vorherigen Abschnitt erwähnte Methode zum Erreichen der horizontalen Zentrierung verwenden, bei der Padding so eingestellt wird, dass die obere und untere

Die Füllwerte können gleich sein. Auch hier handelt es sich um eine „Look“-Methode der vertikalen Zentrierung, es geht lediglich darum, dass der Text das <div> vollständig ausfüllt. Sie können so etwas wie verwenden

Der folgende Code:

div {
Polsterung:25px;
}
Der Vorteil dieser Methode besteht darin, dass sie in jedem Browser lauffähig ist und der Code sehr einfach ist. Voraussetzung für die Anwendung dieser Methode ist jedoch, dass die Höhe des Containers skalierbar sein muss.

</body>
</html>
3. Zentrieren von mehrzeiligem Text mit fester Höhe

Zu Beginn dieses Artikels haben wir gesagt, dass das Vertical-Align-Attribut in CSS nur bei (X)HTML-Tags mit Valign-Attributen funktioniert, es gibt aber auch eine Anzeige in CSS

Das Attribut kann <table> simulieren, daher können wir dieses Attribut verwenden, um <div> dazu zu bringen, <table> zu simulieren und Vertical-Align zu verwenden. Beachten Sie, dass display:table und

So verwenden Sie display:table-cell. Ersteres muss für das übergeordnete Element und letzteres für das untergeordnete Element festgelegt werden. Daher müssen wir ein weiteres <div>-Element für den zu positionierenden Text hinzufügen:

div#wrap {
Höhe:400px;
Anzeige:Tabelle;
}
div#content {
vertikal ausrichten:mitte;
display:table-cell;
Grenze:1px solide #FF0099;
Hintergrundfarbe:#FFCCFF;
Breite:760px;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title> Vertikale Zentrierung von mehrzeiligem Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
Körper {font-size:12px;font-family:tahoma;}
div#wrap {
Höhe:400px;
Anzeige:Tabelle;
}
div#content {
vertikal ausrichten:mitte;
display:table-cell;
Grenze:1px solide #FF0099;
Hintergrundfarbe:#FFCCFF;
Breite:760px;
}
</style>
</head>
<Körper>
<div id="wrap">
<div id="content"><pre>Jetzt wollen wir diesen Text vertikal zentrieren! Webjx.Com
div#wrap {
Höhe:400px;
Anzeige:Tabelle;
}
div#content {
vertikal ausrichten:mitte;
display:table-cell;
Grenze:1px solide #FF0099;
Hintergrundfarbe:#FFCCFF;
Breite:760px;
}
</pre></div>
</div>
</body>
</html>
Diese Methode wäre ideal, aber leider versteht Internet Explorer 6 display:table und display:table-cell nicht richtig, daher wird diese Methode in verwendet

Es ist in Internet Explorer 6 und niedriger ungültig. Nun, das ist deprimierend! Wir haben jedoch andere Methoden. 4. Lösung im Internet Explorer

Im Internet Explorer 6 und niedriger gibt es einen Fehler bei der Höhenberechnung. Nachdem Sie das übergeordnete Element in Internet Explorer 6 positioniert haben, positionieren Sie anschließend das untergeordnete Element

Bei der Durchführung von Prozentberechnungen scheint die Berechnungsgrundlage vererbt zu sein (wenn der positionierte Wert ein absoluter Wert ist, gibt es kein Problem, aber die Berechnungsgrundlage mit Prozentsätzen ist nicht mehr die des Elements).

Höhe, während die Positionierungshöhe vom übergeordneten Element geerbt wird. Wir haben zum Beispiel den folgenden (X)HTML-Codeausschnitt:

<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
Wenn wir beim Subwrap eine absolute Positionierung durchführen, erbt der Inhalt auch dieses Attribut, obwohl es nicht sofort auf der Seite angezeigt wird, wenn der Inhalt weiter positioniert wird

Wenn Zeilen relativ zueinander positioniert sind, entspricht das von Ihnen verwendete Verhältnis von 100 % nicht mehr der ursprünglichen Höhe des Inhalts. Wenn wir beispielsweise die Subwrap-Position auf 40 % festlegen, wenn wir den Inhalt erstellen möchten

Wenn die Kante mit dem Umbruch überlappt, muss top:-80 % festgelegt werden. Wenn wir dann den oberen Teil des Umbruchs festlegen: 50 %, müssen wir 100 % verwenden, um den Inhalt an seine ursprüngliche Position zurückzubringen.

, aber was wäre, wenn wir auch den Inhalt auf 50 % setzen würden? Dann ist es genau vertikal zentriert. Mit dieser Methode können wir also eine vertikale Zentrierung im Internet Explorer 6 erreichen:

div#wrap {
Grenze:1px solide #FF0099;
Hintergrundfarbe:#FFCCFF;
Breite:760px;
Höhe:400px;
Position:relativ;
}
div#subwrap {
Position:absolut;
Grenze: 1 Pixel fest #000;
oben:50%;
}
div#content {
Grenze: 1 Pixel fest #000;
Position:relativ;
oben: -50 %;
}
Natürlich funktioniert dieser Code nur in Browsern mit Computerproblemen wie Internet Exlorer 6. (Aber ich verstehe es nicht. Ich habe viele Artikel überprüft und weiß nicht, ob es daran liegt

Sind sie gleich oder aus irgendeinem Grund? Es scheint, dass viele Leute nicht bereit sind, das Prinzip dieses Fehlers in Internet Explorer 6 zu erklären. Ich habe nur ein oberflächliches Verständnis und muss es weiter untersuchen.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title> Vertikale Zentrierung von mehrzeiligem Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
Körper {font-size:12px;font-family:tahoma;}
div#wrap {
Grenze:1px solide #FF0099;
Hintergrundfarbe:#FFCCFF;
Breite:760px;
Höhe:400px;
Position:relativ;
}
div#subwrap {
Position:absolut;
oben:50%;
}
div#content {
Position:relativ;
oben: -50 %;
}
</style>
</head>
<Körper>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>Jetzt wollen wir diesen Text vertikal zentrieren!
div#wrap {
Grenze:1px solide #FF0099;
Hintergrundfarbe:#FFCCFF;
Breite:760px;
Höhe:500px;
Position:relativ;
}
div#subwrap {
Position:absolut;
Grenze: 1 Pixel fest #000;
oben:50%;
}
div#content {
Grenze: 1 Pixel fest #000;
Position:relativ;
oben: -50 %;
</pre>
</div>
</div>
</div>
</body>
</html>
5. Die perfekte Lösung

Dann können wir durch die Kombination der beiden oben genannten Methoden eine perfekte Lösung erhalten, dies erfordert jedoch Kenntnisse im CSS-Hack. Für die Verwendung von CSS Hack zur Unterscheidung zwischen Browsern können Sie Folgendes tun

Bitte lesen Sie diesen „Einfacher CSS-Hack: IE6, IE7, IE8, Firefox, Opera unterscheiden“:

div#wrap {
Anzeige:Tabelle;
Grenze: 1 Pixel fest #FF0099;
Hintergrundfarbe:#FFCCFF;
Breite:760px;
Höhe:400px;
_position:relativ;
Überlauf:versteckt;
}
div#subwrap {
vertikal ausrichten:mitte;
display:table-cell;
_position:absolut;
_top:50%;
}
div#content {
_position:relativ;
_top:-50 %;
}
An dieser Stelle entsteht eine perfekte Zentrierlösung.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title> Vertikale Zentrierung von mehrzeiligem Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
Körper {font-size:12px;font-family:tahoma;}
div#wrap {
Anzeige:Tabelle;
Grenze:1px solide #FF0099;
Hintergrundfarbe:#FFCCFF;
Breite:760px;
Höhe:400px;
_position:relativ;
Überlauf:versteckt;
}
div#subwrap {
vertikal ausrichten:mitte;
display:table-cell;
_position:absolut;
_top:50%;
}
div#content {
_position:relativ;
_top:-50 %;
}
</style>
</head>
<Körper>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>Jetzt wollen wir diesen Text vertikal zentrieren!
div#wrap {
Grenze:1px solide #FF0099;
Hintergrundfarbe:#FFCCFF;
Breite:760px;
Höhe:500px;
Position:relativ;
}
div#subwrap {
Position:absolut;
Grenze: 1 Pixel fest #000;
oben:50%;
}
div#content {
Grenze: 1 Pixel fest #000;
Position:relativ;
oben: -50 %;
</pre>
</div>
</div>
</div>
</body>
</html>
ps Der Wert der vertikalen Zentrierung ist „vertikal“ und der Wert der horizontalen Zentrierung „Ausrichten“ ist „Mitte“. Obwohl beide zentriert sind, sind die Schlüsselwörter unterschiedlich.