feste Höhe)

Wenn über dieses Problem gesprochen wird, fragen sich manche Leute vielleicht: Gibt es in CSS nicht ein „Vertical-Align“-Attribut, um die vertikale Zentrierung festzulegen? Auch wenn einige Browser es nicht unterstützen, muss ich nur ein wenig CSSHack-Technologie verwenden! Daher muss ich hier noch ein paar Worte verlieren. Es gibt zwar ein vertical-align-Attribut in CSS, aber es funktioniert nur für Elemente in (X)HTML-Elementen, die das valign-Attribut haben, wie z. B. <td>, <th>, <caption> in Tabellenelementen, während Elemente wie <div> und <span> das valign-Attribut nicht haben, sodass die Verwendung von vertical-align für sie nicht funktioniert.
1. Vertikale Zentrierung einer Zeile <br />Wenn ein Container nur eine Textzeile enthält, ist die Zentrierung relativ einfach. Wir müssen nur die tatsächliche Höhe auf die Zeilenhöhe der Zeile setzen, in der sie sich befindet.
wie:

Code kopieren

Der Code lautet wie folgt:

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, wodurch der vertikale Zentrierungseffekt nicht erreicht werden würde. Weitere CSS-Tutorials.

Code kopieren

Der Code lautet wie folgt:

2. Vertikale Zentrierung mehrerer Textzeilen mit unbekannter Höhe <br />Wenn die Höhe eines Absatzes variabel ist, können wir die letzte im vorherigen Abschnitt erwähnte Methode verwenden, um eine horizontale Zentrierung zu erreichen. Dabei wird das Padding so eingestellt, dass die obere und untere
Die Padding-Werte können gleich sein. Auch hier handelt es sich um eine Möglichkeit, den Anschein einer vertikalen Zentrierung zu erwecken. Es ist lediglich eine Möglichkeit, den Text das <div> vollständig ausfüllen zu lassen. Sie können Code ähnlich dem folgenden verwenden:

Code kopieren

Der Code lautet wie folgt:

div{
Polsterung: 25px;
}

Der Vorteil dieser Methode besteht darin, dass sie in jedem Browser ausgeführt werden kann und der Code sehr einfach ist. Die Voraussetzung dieser Methode ist jedoch, dass die Höhe des Containers skalierbar sein muss.

Code kopieren

Der Code lautet wie folgt:

3. Mehrere Textzeilen mit fester Höhe zentrieren <br />Zu Beginn dieses Artikels haben wir gesagt, dass das Attribut „vertical-align“ in CSS nur für (X)HTML-Tags mit dem Attribut „valign“ funktioniert. Es gibt jedoch auch ein Anzeigeattribut in CSS, das <table> simulieren kann. Daher können wir dieses Attribut verwenden, um <div> <table> simulieren zu lassen und „vertical-align“ zu verwenden. Beachten Sie, dass display:table und display:table-cell für das übergeordnete Element und display:table-cell für das untergeordnete Element festgelegt werden müssen. Daher müssen wir ein weiteres <div>-Element für den zu positionierenden Text hinzufügen:

Code kopieren

Der Code lautet wie folgt:

div#wrap{
Höhe: 400px;
Anzeige:Tabelle;
}
div#Inhalt{
vertikale Ausrichtung: Mitte;
Anzeige: Tabellenzelle;
Rand: 1pxsolid#FF0099;
Hintergrundfarbe: #FFCCFF;
Breite: 760px;
}

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title>Mehrzeiliger Text vertikal zentriert</title>
<metahttp-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
<styletype="text/css">
Textkörper {Schriftgröße: 12px; Schriftfamilie: Tahoma;}
div#wrap{
Höhe: 400px;
Anzeige:Tabelle;
}
div#Inhalt{
vertikale Ausrichtung: Mitte;
Anzeige: Tabellenzelle;
Rand: 1pxsolid#FF0099;
Hintergrundfarbe: #FFCCFF;
Breite: 760px;
}
</Stil>
</Kopf>
<Text>
<div = "umbrechen">
<divid="content"><pre>Jetzt möchten wir diesen Text vertikal zentrieren! Webjx.Com
div#wrap{
Höhe: 400px;
Anzeige:Tabelle;
}
div#Inhalt{
vertikale Ausrichtung: Mitte;
Anzeige: Tabellenzelle;
Rand: 1pxsolid#FF0099;
Hintergrundfarbe: #FFCCFF;
Breite: 760px;
}
</pre></div>
</div>
</body>
</html>

Diese Methode sollte ideal sein, aber leider versteht Internet Explorer 6 „display: table“ und „display: table-cell“ nicht richtig, daher ist diese Methode in Internet Explorer 6 und darunter ungültig. Nun, das ist sehr deprimierend! Aber wir haben andere Möglichkeiten
4. Lösung im Internet Explorer
Im Internet Explorer 6 und darunter kommt es zu Defekten bei der Höhenberechnung. Wenn Sie nach dem Positionieren des übergeordneten Elements in Internet Explorer 6 Prozentberechnungen für die untergeordneten Elemente durchführen, scheint die Grundlage für die Berechnung vererbt zu sein (wenn der positionierte Wert ein absoluter Wert ist, gibt es dieses Problem nicht, aber die Grundlage für die Prozentberechnung ist dann nicht mehr die Höhe des Elements, sondern die vom übergeordneten Element geerbte positionierte Höhe). Beispielsweise haben wir den folgenden (X)HTML-Ausschnitt:

Code kopieren

Der Code lautet wie folgt:

Wenn wir den Subwrap absolut positionieren, erbt der Inhalt auch diese Eigenschaft. Obwohl er nicht sofort auf der Seite angezeigt wird, entspricht das von Ihnen verwendete Verhältnis von 100 % nicht mehr der ursprünglichen Höhe des Inhalts, wenn Sie den Inhalt relativ positionieren. Wenn wir beispielsweise die Position des Subwraps auf 40 % festlegen und die Oberkante des Inhalts mit dem Wrap übereinstimmen soll, müssen wir „top: -80 %“ festlegen. Wenn wir dann „top: 50 %“ des Subwraps festlegen, müssen wir 100 % verwenden, um den Inhalt an seine ursprüngliche Position zurückzusetzen. Was aber, wenn wir den Inhalt ebenfalls auf 50 % festlegen? Dann ist es genau vertikal zentriert. Mit dieser Methode können wir eine vertikale Zentrierung im Internet Explorer 6 erreichen:

Code kopieren

Der Code lautet wie folgt:

div#wrap{
Rand: 1pxsolid#FF0099;
Hintergrundfarbe: #FFCCFF;
Breite: 760px;
Höhe: 400px;
Position: relativ;
}
div#subwrap{
Position: absolut;
Rand: 1pxsolid#000;
oben: 50 %;
}
div#Inhalt{
Rand: 1pxsolid#000;
Position: relativ;
oben: -50%;
}

Natürlich funktioniert dieser Code nur in Browsern mit Rechenproblemen wie etwa Internet Explorer 6. (Aber ich verstehe es nicht. Ich habe viele Artikel konsultiert und weiß nicht, ob es an derselben Quelle liegt oder aus einem anderen Grund, aber es scheint, dass viele Leute nicht bereit sind, das Prinzip dieses Fehlers in InternetExplorer6 zu erklären. Ich habe nur ein bisschen verstanden und muss es weiter studieren.)

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title>Mehrzeiliger Text vertikal zentriert</title>
<metahttp-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
<styletype="text/css">
Textkörper {Schriftgröße: 12px; Schriftfamilie: Tahoma;}
div#wrap{
Rand: 1pxsolid#FF0099;
Hintergrundfarbe: #FFCCFF;
Breite: 760px;
Höhe: 400px;
Position: relativ;
}
div#subwrap{
Position: absolut;
oben: 50 %;
}
div#Inhalt{
Position: relativ;
oben: -50%;
}
</Stil>
</Kopf>
<Text>
<div = "umbrechen">
<divid="Unterverpackung">
<divid="content"><pre>Jetzt möchten wir diesen Text vertikal zentrieren!
div#wrap{
Rand: 1pxsolid#FF0099;
Hintergrundfarbe: #FFCCFF;
Breite: 760px;
Höhe: 500px;
Position: relativ;
}
div#subwrap{
Position: absolut;
Rand: 1pxsolid#000;
oben: 50 %;
}
div#Inhalt{
Rand: 1pxsolid#000;
Position: relativ;
oben: -50%;
}</pre>
</div>
</div>
</div>
</body>
</html>

5. Perfekte Lösung <br />Dann können wir durch die Kombination der beiden oben genannten Methoden eine perfekte Lösung erhalten, aber dazu sind Kenntnisse von CSShack erforderlich. Informationen zur Verwendung von CSSHack zum Unterscheiden von Browsern finden Sie hier: „Einfacher CSShack: Unterscheiden von IE6, IE7, IE8, Firefox, Opera“:

Code kopieren

Der Code lautet wie folgt:

div#wrap{
Anzeige:Tabelle;
Rand: 1pxsolid#FF0099;
Hintergrundfarbe: #FFCCFF;
Breite: 760px;
Höhe: 400px;
_position:relativ;
Überlauf: versteckt;
}
div#subwrap{
vertikale Ausrichtung: Mitte;
Anzeige: Tabellenzelle;
_position:absolut;
_oben: 50 %;
}
div#Inhalt{
_position:relativ;
_oben: -50 %;
}

An dieser Stelle entsteht eine optimale Zentrierlösung.

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title>Mehrzeiliger Text vertikal zentriert</title>
<metahttp-equiv="Inhaltstyp" content="text/html; charset=utf-8"/>
<styletype="text/css">
Textkörper {Schriftgröße: 12px; Schriftfamilie: Tahoma;}
div#wrap{
Anzeige:Tabelle;
Rand: 1pxsolid#FF0099;
Hintergrundfarbe: #FFCCFF;
Breite: 760px;
Höhe: 400px;
_position:relativ;
Überlauf: versteckt;
}
div#subwrap{
vertikale Ausrichtung: Mitte;
Anzeige: Tabellenzelle;
_position:absolut;
_oben: 50 %;
}
div#Inhalt{
_position:relativ;
_oben: -50 %;
}
</Stil>
</Kopf>
<Text>
<div = "umbrechen">
<divid="Unterverpackung">
<divid="content"><pre>Jetzt möchten wir diesen Text vertikal zentrieren!
div#wrap{
Rand: 1pxsolid#FF0099;
Hintergrundfarbe: #FFCCFF;
Breite: 760px;
Höhe: 500px;
Position: relativ;
}
div#subwrap{
Position: absolut;
Rand: 1pxsolid#000;
oben: 50 %;
}
div#Inhalt{
Rand: 1pxsolid#000;
Position: relativ;
oben: -50%;
}</pre>
</div>
</div>
</div>
</body>
</html>

Der Wert von vertical-align für ps vertical center ist middle, während der Wert von horizontal center align center ist. Obwohl beide zentriert sind, sind die Schlüsselwörter unterschiedlich.

<<: Wie stellt MySQL die Master-Slave-Konsistenz sicher?

>>: Was sind die Unterschiede zwischen xHTML- und HTML-Tags?

15 Linux-Befehlsaliase, die Ihnen Zeit sparen

N Möglichkeiten, ein Div mit einzeiligem/mehrzeiligem Text vertikal zu zentrieren (unbekannte Höhe/feste Höhe)

15 Linux-Befehlsaliase, die Ihnen Zeit sparen

CSS-Stil funktioniert nicht (die umfassendste Lösungszusammenfassung der Geschichte)

Der Prozess der Installation von SVN auf Ubuntu 16.04.5LTS

Was bedeutet das n nach int(n) in MySQL?

So löschen Sie den Timer elegant in Vue

Installieren Sie Redis und MySQL auf CentOS

HTML erstellt eine einfache und schöne Anmeldeseite

Zusammenfassung der Blockelemente, Inline-Elemente und variablen Elemente

Eine kurze Erläuterung des Lazy-Loading-Attributmusters in JavaScript

Lösung für das Problem, dass Java keine Verbindung zu MySQL 8.0 herstellen kann

Artikel empfehlen

Navicat Premium betreibt MySQL-Datenbank (führt SQL-Anweisungen aus)

Detaillierte Erklärung zur Bereitstellung von Elasticsearch Kibana und IK Word Segmenter im Docker

Detaillierte Erklärung der numerischen Trennzeichen von TS und strengere Klassenattributprüfungen

js zur Realisierung der automatischen Sperrbildschirmfunktion

JavaScript BOM erklärt

Detailliertes Tutorial zum Aufbau eines lokalen Ideenaktivierungsservers

Detaillierte Erläuterung des MySQL-Isolationsebenen-Operationsprozesses (cmd)

Ideen und Codes zur Implementierung des Wasserfall-Flow-Layouts im UniApp-Applet

CSS3 realisiert Textreliefeffekt, Gravureffekt, Flammentext

Analyse der Unterschiede zwischen Iframe und FRAME

Eine kurze Erläuterung zum Festlegen der absoluten CSS-Position relativ zum übergeordneten Element

Lösung für das Problem, dass Docker Nginx nach dem Ausführen nicht mehr aufgerufen werden kann

Drei BOM-Objekte in JavaScript

So deaktivieren Sie Webseitenstile mit dem Webentwickler von Firefox

Detaillierte Erläuterung der Konfigurationsmethode „Groß-/Kleinschreibung ignorieren“ für MySQL-Tabellennamen