Heim > Artikel > Web-Frontend > Wie zentriere ich Text in einem responsiven Div-Element vertikal?

Wie zentriere ich Text in einem responsiven Div-Element vertikal?

Patricia ArquetteOriginal: 2024-11-09 04:20:02413Durchsuche

How to Vertically Center Text in a Responsive Div Element?

Vertikale Textausrichtung in einem Responsive Div-Element

Beim Umgang mit Inhalten in dynamisch dimensionierten DIV-Containern kann die vertikale Textausrichtung eine Herausforderung sein. In dieser Frage wird untersucht, wie Text innerhalb eines DIV-Elements unabhängig von seiner Höhe vertikal zentriert wird.

Problemstellung:

Bedenken Sie die folgende HTML-Struktur:

<body>
    <div>

Wie kann das H1-Tag unabhängig von der DIV-Höhe vertikal im DIV zentriert werden?

Lösung:

Die effektivste Lösung besteht darin, die Anzeigeeigenschaft zu nutzen . Indem wir das Wrapper-Element als Tabelle festlegen, ermöglichen wir die Verwendung von Vertical-Align:Middle zum Zentrieren des Elements:

<body>
    <div>
        Text

body {width: 100%; height: 100%;}  /* For visualization purposes */

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

Testen:

Die Lösung wurde auf verschiedenen Plattformen und Browsern getestet, darunter:

Windows XP Profissional versão 2002 Service Pack 3

Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m

Windows 7 Home Edition Service Pack 1

Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

Firefox 12.0
Chromium 18.0. 1025.151 (Entwickler-Build 130497 Linux)

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text in einem responsiven Div-Element vertikal?. 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 stelle ich die Deckkraft für Div-Hintergründe ein, ohne die enthaltenen Elemente in IE 8 zu beeinträchtigen?Nächster Artikel：Wie stelle ich die Deckkraft für Div-Hintergründe ein, ohne die enthaltenen Elemente in IE 8 zu beeinträchtigen?

In Verbindung stehende Artikel

Mehr sehen