Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-11-07 12:13:03
Original
502 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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage