Heim > Artikel > Web-Frontend > Wie zentriere ich Text in einem skalierbaren Div vertikal?
Wie zentriere ich Text in einem skalierbaren Div vertikal?
- Barbara StreisandOriginal
- 2024-11-09 07:50:02266Durchsuche
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>
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;
}
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!