Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

Ich bin in letzter Zeit auf viele Zentrierungsprobleme gestoßen, daher habe ich mir die Zeit genommen, sie zusammenzufassen und hier einzustellen, damit sie später leicht zu finden sind.

1. Text zentrieren

Code kopieren

Der Code lautet wie folgt:

<div Klasse="wrap">
Ich bin mittendrin...
</div>
.. Höhe+Zeilenhöhe+Textmitte (kann nur eine einzelne Zeile zentrieren)
.wickeln{
Breite: px;
Höhe:px;
Rand: px durchgehend rot;
Textausrichtung: zentriert;
Zeilenhöhe: px;
}

ps:text-align:center zentriert nur die Inline-Elemente unterhalb des Elements
1.2display:table-cell (mehrere Zeilen mit fester Höhe zentriert)

Code kopieren

Der Code lautet wie folgt:

.wickeln{
Breite: px;
Höhe:px;
Rand: px durchgehend rot;
Textausrichtung: zentriert;
Anzeige: Tabellenzelle;
vertikale Ausrichtung: Mitte;
}

display:table-cell: funktioniert nicht in IE67, es ist am besten, es mit display:table; zu verwenden.
Unter ie67: (Ich werde es nicht mehr verwenden, aber ich werde es hier einfügen)
Methode 1: (Die Höhe des em-Tags ist die gleiche wie die des übergeordneten Elements, daher ist die Zentrierung von span und em gleichbedeutend mit der Zentrierung des übergeordneten Elements durch span.)

Code kopieren

Der Code lautet wie folgt:

<div Klasse="wrap">
<span>
Ich bin mittendrin... Ich bin mittendrin... Ich bin mittendrin...
</span>
<em>
</div>
.wickeln{
Breite: px;
Höhe:px;
Rand: px durchgehend rot;
Textausrichtung: zentriert;
}
.wrap span{
vertikale Ausrichtung: Mitte;
Anzeige: Inline-Block;
Breite: px;
}
.wrap em{
Höhe:%;
vertikale Ausrichtung: Mitte;
Anzeige: Inline-Block;
}

Methode 2: (Indem Sie dem untergeordneten Element ein absolut positioniertes übergeordnetes Tag hinzufügen und dann die relative Positionierung des untergeordneten Elements verwenden, um es horizontal und vertikal zu zentrieren)

Code kopieren

Der Code lautet wie folgt:

<div Klasse="wrap">
<span class="span">
<span class="span">Ich bin mittendrin... Ich bin mittendrin... Ich bin mittendrin... Ich bin mittendrin...</span>
</span>
</div>
.wickeln{
Breite: px;
Höhe:px;
Rand: px durchgehend rot;
Anzeige:Tabelle;
Position: relativ;
Überlauf: versteckt;
}
.wrap .span{
Anzeige: Tabellenzelle;
vertikale Ausrichtung: Mitte;
Textausrichtung: zentriert;
*position:absolut;
Spitze:%;
links:%;
}
.wrap .span{
*Position:relativ;
Spitze:-%;
links:-%;
}

1.3 Polsterung (natürlich interne Polsterung)

Code kopieren

Der Code lautet wie folgt:

.wickeln{
Breite:px;
Rand: px durchgehend rot;
Polsterung: px;
}

2. Zentrierelemente

Code kopieren

Der Code lautet wie folgt:

2.1Position:absoluter+Rand negativer Wert (Breite und Höhe werden zur Berechnung des Randes benötigt)

Code kopieren

Der Code lautet wie folgt:

.wickeln{
Breite: px;
Höhe:px;
Position: absolut;
Spitze:%;
links:%;
Rand oben: -px;
Rand links: -px;
Rand: px durchgehend rot;
}
.wrap span{
Breite: px;
Höhe:px;
Hintergrund: rot;
Position: absolut;
Spitze:%;
links:%;
Rand oben: -px;
Rand links: -px;
}

ps: CSS realisiert horizontale und vertikale DIV-Zentrierung

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<title>Vertikale Zentrierung Online-Demonstration DIVCSS5</title>
<Stil>
#hauptsächlich {
Position: absolut;
Breite: 400px;
Höhe: 200px;
links: 50 %;
oben: 50 %;
Rand links: -200px;
Rand oben: -100px;
Rahmen: 1px durchgezogen #00F
}
/*CSS-Kommentar: Umschließen Sie den CSS-Code für die einfachere Darstellung von Screenshots*/
</Stil>
</Kopf>
<Text>
<div id="main">DIV horizontal zentriert und vertikal zentriert<a href="http://www.divcss5.com/">DIVCSS5</a></div>
</body>
</html>

Einführung in die Prinzipien der horizontalen und vertikalen Zentrierung <br />Hier wird die absolute Positionierung position:absolute verwendet, und mit left und top wird der Abstand des Objekts von oben und links auf 50 % gesetzt. Bei einer Einstellung von 50 % ist die Box allerdings nicht zentriert, daher werden margin-left:-200px;margin-top:-100px; gesetzt. Dabei gibt es einen Trick: Der Wert von margin-left beträgt die halbe Breite, und der Wert von margin-top ebenfalls die halbe Objekthöhe. Gleichzeitig werden sie negativ gesetzt, um eine horizontale und vertikale Zentrierung zu erreichen.

<<: Docker-Installations- und Konfigurationsschritte für das Redis-Image

>>: Einführung in JavaScript-Array-Deduplizierungs- und -Flatteningfunktionen

So implementieren Sie Leerzeichen in Taobao mit CSS3

Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

So implementieren Sie Leerzeichen in Taobao mit CSS3

Data URI und MHTML Komplettlösung für alle Browser

So entwickeln Sie Uniapp mit vscode

So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop

Detaillierte Erklärung zur Verwendung von $props, $attrs und $listeners in Vue

Lösen Sie das Problem, dass Docker Pull zurückgesetzt wird

Lösen Sie das MySQL-Login-1045-Problem unter CentOS

CSS imitiert Fernbedienungstasten

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27

Detaillierter Prozess der Vue-Front-End-Verpackung

Artikel empfehlen

So stellen Sie vom lokalen Windows-Remotedesktop eine Verbindung zum Alibaba Cloud Ubuntu 16.04-Server her

So verarbeiten Sie sehr große Formularbeispiele mit Vue+ElementUI

Tutorial zur Installation und Bereitstellung des automatischen Mount-Dienstes Autofs unter Linux

Beim Ändern eines Datensatzes in MySQL lautet die Aktualisierungsoperation Feld = Feld + Zeichenfolge

Beispiel für die Implementierung einer Ankerpositionierungsfunktion beim WeChat-Applet

Eine detaillierte Einführung in die CSS-Namensspezifikation BEM von QQtabBar

Details der MySQL-Berechnungsfunktion

Ändern Sie die MySQL-Datenbank-Engine in InnoDB

Ein kurzer Vortrag über Responsive Design

Docker-Compose - Bereitstellung der chinesischen Gitlab-Version per Mausklick - Methodenschritte

So implementiert Webpack das Caching statischer Ressourcen

Lösung für den MySQL-Server-Anmeldefehler ERROR 1820 (HY000)

Logrotate implementiert alle zwei Stunden die Catalina.out-Protokollrotation

So verwenden Sie Binlog zur Datenwiederherstellung in MySQL

Natives JS-objektorientiertes Tippspiel