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>
Um das
Lösung: Nutzen Sie die Anzeigeeigenschaft, um den Wrapper
Beispielcode:
HTML
<body> <div>Text
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; }
Dieser Ansatz wurde auf verschiedenen Browsern und Plattformen getestet, darunter:
Getestete Systeme:
Getestet Browser:
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!