Wie zentriere ich Text in einem skalierbaren Div vertikal?-CSS-Tutorial-php.cn

Wie zentriere ich Text in einem skalierbaren Div vertikal?

Barbara Streisand

Freigeben： 2024-11-09 07:50:02

Original

327 Leute haben es durchsucht

How to Vertically Center Text in a Resizable Div?

So zentrieren Sie Text in einem veränderbaren Div vertikal

Bei der Arbeit mit Div-Elementen mit dynamischer Größe kann es schwierig sein, die vertikale Ausrichtung des Texts innerhalb des Div beizubehalten. Dieses Problem tritt auf, wenn die Höhe des Div nicht festgelegt ist, da sie abhängig von Faktoren wie der Browserhöhe des Benutzers variieren kann.

Lösung:

Um dieses Problem zu beheben Eine vielseitige Lösung besteht darin, die display-Eigenschaft zu nutzen, um das div-Element in eine tabellarische Struktur umzuwandeln. Indem wir die Anzeigeeigenschaft auf Tabelle setzen, erstellen wir eine tabellenähnliche Umgebung innerhalb des Div. Dadurch können wir die Eigenschaft „Vertical-Align“ für das Textelement verwenden, um es innerhalb des Div vertikal zu zentrieren.

HTML-Markup:

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

Nach dem Login kopieren

CSS Stil:

body {
    width: 100%;
    height: 100%;
}

div {
    position: absolute;
    height: 100%;
    width: 100%;
    display: table;
}

h1 {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Nach dem Login kopieren

Bemerkenswerte Browser Getestet:

Mit dieser Technik haben wir die vertikale Zentrierung von Text in div-Elementen in verschiedenen Browsern erfolgreich getestet, darunter:

Windows XP:

Internet Explorer 8
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18

Windows 7:

Internet Explorer 9
Opera 11.62
Firefox 12
Safari 5.1.4
Google Chrome 18

Linux Ubuntu 12.04:

Firefox 12
Chrom 18

Das obige ist der detaillierte Inhalt vonWie zentriere ich Text in einem skalierbaren Div vertikal?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!