Heim > Web-Frontend > CSS-Tutorial > Wie zentriere ich Text in einem Div mit dynamischer Höhe vertikal?

Wie zentriere ich Text in einem Div mit dynamischer Höhe vertikal?

Linda Hamilton
Freigeben: 2024-11-07 10:39:02
Original
885 Leute haben es durchsucht

How to Vertically Center Text in a Div with Dynamic Height?

Vertikale Zentrierung von Text in einem Div mit dynamischer Höhe

Problem:
Erzielung einer vertikalen Ausrichtung von Text innerhalb eines Div-Elements mit variabler Höhe , unabhängig von den Abmessungen des Browserfensters.

Erklärung:
Um den Text innerhalb des Div mit dynamischer Größe vertikal zu zentrieren, verwenden wir die Anzeigeeigenschaft und das Vertical-Align-Attribut.

Lösung:

  1. Wrapper-Div so einstellen, dass es als Tabelle angezeigt wird:

    div {
     display: table;
    }
    Nach dem Login kopieren
  2. Stil das Textelement als Tabellenzelle und richten Sie es vertikal in der Mitte aus:

    h1 {
     display: table-cell;
     vertical-align: middle;
     text-align: center;
    }
    Nach dem Login kopieren

Zusätzliche Hinweise:
Diese Lösung wurde mehrfach gründlich getestet Betriebssysteme und Browser, einschließlich Windows XP, Windows 7 und Linux Ubuntu, mit Internet Explorer, Opera, Firefox, Safari und Google Chrome.

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

Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage