Das Erreichen einer vertikalen Textzentrierung innerhalb eines Divs unbekannter Höhe kann eine Herausforderung sein. Sehen wir uns eine Lösung an, die eine konsistente Ausrichtung unabhängig von den Dimensionen des Divs gewährleistet.
Die Lösung nutzt die Anzeigeeigenschaft, um das Wrapper-Element als Tabelle festzulegen. Dadurch können wir die Vertical-Alignment-Eigenschaft innerhalb des Elements nutzen, das wir zentrieren möchten.
Beispielcode:
<body> <div> <h1>Text</h1> </div> </body>
body {width: 100%; height: 100%;} /* This is just to "view" the div height... */ div { position:absolute; height:100%; width:100%; display: table; } h1 { display: table-cell; vertical-align: middle; text-align:center; }
Wie es geht Funktioniert:
Diese Lösung wurde auf verschiedenen Browsern und Betriebssystemen getestet, darunter Internet Explorer, Firefox, Chrome, Opera und Safari. Es bietet eine einfache und effektive Möglichkeit, Text innerhalb eines dynamischen Höhenbereichs vertikal zu zentrieren.
Das obige ist der detaillierte Inhalt vonWie kann man Text in einem Div unbekannter Höhe vertikal zentrieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!