Wie kann man Text in einem Div unbekannter Höhe vertikal zentrieren?-CSS-Tutorial-php.cn

Wie kann man Text in einem Div unbekannter Höhe vertikal zentrieren?

Patricia Arquette

Freigeben： 2024-11-11 09:52:02

Original

733 Leute haben es durchsucht

How to Vertically Center Text in a Div of Unknown Height?

Dynamische vertikale Textausrichtung in Divs

Das Erreichen einer vertikalen Textzentrierung innerhalb eines Divs unbekannter Höhe kann eine Herausforderung sein. Sehen wir uns eine Lösung an, die eine konsistente Ausrichtung unabhängig von den Dimensionen des Divs gewährleistet.

Die Lösung nutzt die Anzeigeeigenschaft, um das Wrapper-Element als Tabelle festzulegen. Dadurch können wir die Vertical-Alignment-Eigenschaft innerhalb des Elements nutzen, das wir zentrieren möchten.

Beispielcode:

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

Nach dem Login kopieren

body {width: 100%; height: 100%;}   /* This is just to "view" the div height... */

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

Nach dem Login kopieren

Wie es geht Funktioniert:

Die Eigenschaften position: absolute und height: 100% stellen sicher, dass das div die gesamte Höhe der Webseite abdeckt.
Durch die Einstellung von display: table auf dem div , erlauben wir der table-cell-Eigenschaft des h1-Tags, seinen Inhalt vertikal auszurichten.
Die Vertical-Align: Middle-Eigenschaft zentriert das h1-Tag vertikal innerhalb des div. Dadurch wird sichergestellt, dass der Text zentriert bleibt, auch wenn sich die Größe des Div ändert.

Diese Lösung wurde auf verschiedenen Browsern und Betriebssystemen getestet, darunter Internet Explorer, Firefox, Chrome, Opera und Safari. Es bietet eine einfache und effektive Möglichkeit, Text innerhalb eines dynamischen Höhenbereichs vertikal zu zentrieren.

Das obige ist der detaillierte Inhalt vonWie kann man Text in einem Div unbekannter Höhe vertikal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!