Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

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:

<div Klasse="wrap">
<span></span>
</div>

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

Artikel empfehlen

Detaillierte Erläuterung der Befehle zum Lesen und Schreiben von Remotedateien mit Vim im Linux-System

Arbeitsmodus von vim einstellen (vorübergehend) :...

MySQL Master-Slave-Replikationsprinzip und zu beachtende Punkte

Vorne geschrieben Ich habe kürzlich ein spezielle...

So verwenden Sie CSS-Variablen in JS

So verwenden Sie CSS-Variablen in JS Verwenden Si...

Anweisungen zur Verwendung der MySQL-Isolations-Leseansicht

Welche historische Version kann die aktuelle Tran...

Detaillierte Erklärung, wie Zabbix den Master-Slave-Status von MySQL überwacht

Nach dem Einrichten des MySQL-Master-Slaves wisse...

Vue+Openlayer Batch-Einstellung von Flash Point-Implementierungscode (basierend auf dem Postrender-Mechanismus)

Effektbild: Implementierungscode: <Vorlage>...

Detaillierte Erläuterung der Implementierung des MySQL-Autoinkrements des Primärschlüssels

Inhaltsverzeichnis 1. Wo wird der selbstinkrement...

Über das Problem, dass nach der VMware-Installation keine virtuelle Netzwerkkarte vorhanden ist

1 Problembeschreibung: 1.1 Wenn VMware zum ersten...

So konfigurieren Sie den Tomcat-Server für Eclipse und IDEA

Tomcat-Serverkonfiguration Jeder, der das Web ken...

Beispiel, wie man einen Div-Hintergrund transparent macht

Es gibt zwei gängige Möglichkeiten, den Div-Hinte...

Fehlerbehebungsprozess für Docker-Container, bei dem nach der Portzuordnung plötzlich keine Verbindung mehr hergestellt werden kann

1. Hintergrund Im Allgemeinen verwenden wir für D...

Detaillierte Schritte zum Löschen von Umgebungsvariablen in Linux

Wie lösche ich Umgebungsvariablen unter Linux? Ve...

So integrieren Sie Bilder eleganter in Vue-Seiten

Inhaltsverzeichnis Fehlerdemonstration Durch bere...

Detaillierte Erläuterung gängiger Methoden von JavaScript-Arrays

Inhaltsverzeichnis Gängige Array-Methoden Pop() u...

Auszeichnungssprachen – Was lernen, nachdem man HTML gelernt hat?

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...