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

Vue implementiert Beispielcode für benutzerdefinierte „modales Popup-Fenster“-Komponente

Inhaltsverzeichnis Vorwort Rendern Beispielcode Z...

Detaillierter Prozess der Installation von Jenkins-2.249.3-1.1 mit Docker

Inhaltsverzeichnis 1. Docker installieren 2. Zieh...

So verbergen Sie Elemente im Web und ihre Vor- und Nachteile

Beispiel-Quellcode: https://codepen.io/shadeed/pe...

Beispielcode von Vue + Element UI zur Realisierung der Player-Funktion

Die Anzeige ohne Effektbild ist nur leeres Gerede...

JavaScript realisiert den Warteschlangenstrukturprozess

Inhaltsverzeichnis 1. Warteschlangen verstehen 2....

Einführung in die Verwendung von this in HTML-Tags

Zum Beispiel: Code kopieren Der Code lautet wie fo...

Lösen Sie das Problem der leeren Lücke am unteren Rand des Img-Bildes

Bei der Arbeit an einem aktuellen Projekt habe ic...

CSS zum Erzielen einer Schließen-Schaltfläche zum Vergrößern und Verkleinern (Beispielcode)

Dieser Effekt tritt am häufigsten auf unserer Bro...

So fügen Sie schnell 10 Millionen Datensätze in MySQL ein

Ich habe gehört, dass es eine Interviewfrage gibt...

Sicherheitskonfigurationsstrategie für CentOS-Server

In letzter Zeit wurde der Server häufig mit Brute...

CentOS 6 verwendet Docker, um ein Beispiel für den Betrieb einer Redis-Master-Slave-Datenbank bereitzustellen

In diesem Artikel wird beschrieben, wie Sie mit D...

Standardmäßige Stilanordnung für HTML-Tags

html, address,blockquote,body, dd, div,dl, dt, fie...

Webdesign-Tutorial (7): Verbesserung der Webdesign-Effizienz

<br />Vorheriger Artikel: Webdesign-Tutorial...

CSS verwendet die Alibaba-Vektorbibliothek, um den entsprechenden Positionen schnell ansprechende Symboleffekte hinzuzufügen (Beispielcode).

Rufen Sie die Alibaba-Vektorsymbolbibliothek auf ...

So beheben Sie den abnormalen Fehler ERROR: 2002 in MySQL

Kürzlich ist beim Starten von MySQL ein Fehler au...