Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

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

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

Patricia Arquette

Freigeben： 2024-11-09 04:20:02

Original

488 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!

Quelle：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 wende ich mit der „Parent“-Klasse mithilfe des n-ten-Kind-Selektors abwechselnde Farben auf Listenelemente an?

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

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2327

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2461

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2082

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...