Wie kann man Text in dynamischen Höhenunterschieden vertikal zentrieren?-CSS-Tutorial-php.cn

Wie kann man Text in dynamischen Höhenunterschieden vertikal zentrieren?

Barbara Streisand

Freigeben： 2024-11-07 12:13:03

Original

551 Leute haben es durchsucht

How to Vertically Center Text in Dynamically Height Divs?

Vertikale Textausrichtung in dynamischen Höhenunterschieden

Beim Anpassen von Website-Elementen an vom Benutzer anpassbare Browserhöhen ist es oft wichtig, die vertikale Ausrichtung sicherzustellen Der Text innerhalb dynamischer Höhenbereiche bleibt zentriert. Wie kann dies erreicht werden?

Bedenken Sie die folgende HTML-Struktur:

<body>
    <div>

Nach dem Login kopieren

Um das

Tag innerhalb des umgrenzenden

Unabhängig von der Höhe verwenden Sie die folgende Strategie:

Lösung: Nutzen Sie die Anzeigeeigenschaft, um den Wrapper

festzulegen. Element als Tabelle, sodass die Vertical-Align-Eigenschaft das enthaltene Element zentrieren kann.

Beispielcode:

HTML

<body>
    <div>
        Text

Nach dem Login kopieren

CSS

body {width: 100%; height: 100%;}   /* for visual demonstration of 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

Dieser Ansatz wurde auf verschiedenen Browsern und Plattformen getestet, darunter:

Getestete Systeme:

Windows XP Professional, Service Pack 3
Windows 7 Home Edition, Service Pack 1
Linux Ubuntu 12.04

Getestet Browser:

Internet Explorer 8.0.6001.18702, 9.0.8112.164211C
Opera 11.62
Firefox 3.6.16, 12.0
Safari 5.1.2, 5.1.4
Google Chrome 18.0.1025.168 m
Chromium 18.0.1025.151 (Developer Build 130497 Linux)

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