suchen

Heim >Web-Frontend >CSS-Tutorial >Wie kann man Text in dynamischen Höhenunterschieden vertikal zentrieren?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-07 12:13:03609Durchsuche

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>

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

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;
}

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!

chrome html Property this display table windows linux ubuntu
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Wie kann ich Cursorbilder in CSS in verschiedenen Browsern anpassen?Nächster Artikel：Wie kann ich Cursorbilder in CSS in verschiedenen Browsern anpassen?

In Verbindung stehende Artikel

Mehr sehen