Zusammenfassung von 7 Möglichkeiten, Divs vertikal zu zentrieren

In unserer täglichen Webentwicklung verwenden wir häufig CSS und DIV für das Layout, um die Seite schöner zu machen und ein besseres Erlebnis zu bieten. Wie können wir die Div-Anzeige auf verschiedene Arten zentrieren? Lassen Sie uns die Methode zusammenfassen Vertikal zentrierende Divs im Detail.

So zentrieren Sie Divs vertikal mit CSS:

1.CSS-Tutorial: Verschiedene Methoden zur vertikalen Zentrierung von Divs

Wenn man über dieses Problem spricht, fragen sich einige Leute 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-Hack-Technologie anwenden! Deshalb muss ich hier ein paar Worte sagen. Es gibt zwar ein Vertical-Align-Attribut in CSS, aber es wirkt sich nur auf Elemente mit Valign-Attributen in (X)HTML-Elementen aus, wie zum Beispiel

, , usw. Elemente wie

, haben keine valign-Attribute, daher funktioniert die Verwendung von Vertical-Align nicht.

2.Beispielanalyse für CSS-Text und Div-Vertikalzentrierungsmethode

Im Stillayout, wir Wir Oft besteht die Notwendigkeit, Elemente zu zentrieren. Es ist relativ einfach, eine horizontale Zentrierung von Elementen über CSS zu erreichen: Für Text müssen Sie nur text-align: center für das übergeordnete Element festlegen, und für Elemente auf Blockebene wie p müssen Sie nur die Randwerte festlegen ​​​​von links und rechts auf automatisch. Um eine vertikale Zentrierung von Elementen zu erreichen, denken manche Leute an das Vertical-Align-Attribut in CSS, aber es wirkt sich nur auf Elemente mit Valign-Attributen wie

, , usw. aus. in Tabellenelementen und Elementen wie

haben nicht das valign-Attribut, daher funktioniert die Verwendung von Vertical-Align nicht. Daher müssen wir andere Methoden verwenden, um eine vertikale Zentrierung von Elementen zu erreichen. Im Folgenden habe ich einige häufig verwendete vertikale Zentrierungsmethoden zusammengefasst.

3.[Frontstage] CSS-Steuerung DIV vertikale Zentrierung

Denn zu diesem Zeitpunkt verwendet der Browser die Position, die als grüner Punkt in angezeigt wird Das Bild. Um den Inhalt zu zentrieren, stellen Sie margin-left und margin-top jeweils auf negative halbe Breite und halbe Breite ein.

2. Zentrieren Sie das Div horizontal und vertikal:

1. Verwenden Sie CSS, um eine horizontale und vertikale Zentrierung von Divs zu erreichen

Es gibt viele Lösungen, um eine Zentrierung zu erreichen. In diesem Artikel wird hauptsächlich die Lösung von pure CSS verwendet absolutes mit margin , margin-top ist -(height / 2), margin-left ist -(width / 2). Natürlich können Sie den Rand nicht verwenden, d. Ich brauche es nicht.

2.CSS, um eine horizontale und vertikale Zentrierung von DIV auf dem Bildschirm zu erreichen

CSS, wie man eine horizontale und vertikale Zentrierung von im Vollbildmodus erreicht p. In diesem Kapitel wird erläutert, wie ein p-Element den horizontalen und vertikalen Zentrierungseffekt innerhalb der gesamten Webseite erzielt. Schauen Sie sich den Code einfach direkt an.

Verwandte Fragen und Antworten zur vertikalen Div-Zentrierung:

1.css3 – Wie zentriere ich den Inhalt in einem Div horizontal und vertikal?

2.css – Wie zentriere ich div im mobilen UC-Browser horizontal und vertikal?

【div vertikale Zentrierung bezogen Artikel】

1. CSS-Bildzentrierung: CSS-Bildzentrierung nach oben, unten, links und rechts (horizontal und vertikal zentriert)

2.div-Zentrierung: die umfassendste Zusammenfassung der Div-Zentrierungsmethoden

3. CSS-Zentrierung: Die umfassendste Sammlung von CSS-Zentrierungsmethoden

Das obige ist der detaillierte Inhalt vonZusammenfassung von 7 Möglichkeiten, Divs vertikal zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!