Wie man Text vertikal in CSS ausrichtet

Der zuverlässigste Weg, um den Text in CSS vertikal auszurichten, ist die Verwendung von Flexbox mit Align-Items: Center, die sowohl für einzelne als auch für mehrere Textzeilen in einem Container mit definierter Höhe funktioniert. Alternativ bietet CSS-Gitter mit Orte-Items: Center ähnliche Vorteile für gitterbasierte Layouts, während die Übereinstimmung der Zeilenhöhe, die die Behälterhöhe entspricht, nur für Einzellinientext geeignet ist, und ältere Methoden wie Display: Tischzell mit vertikaler Ausrichtung: mittlere oder absolute Positionierung mit Transformation: Translate (-50%) liefern.

Vertikal ausgerichtetes Text in CSS kann schwierig sein, da er vom Kontext abhängt - z. B. ob Sie Text in einem Blockelement, einer Tabellenzelle oder einem Flex -Behälter ausrichten. Hier sind die häufigsten und zuverlässigsten Methoden, die heute verwendet werden.

1. Verwenden von Flexbox (am häufigsten und empfohlen)

Flexbox ist der einfachste und modernste Weg, um vertikal zu zentrieren.

 .Container {
  Anzeige: Flex;
  Ausrichtung: Zentrum; / * Vertikal Zentren *///
  Justify-Content: Center; / * Horizontal Zentren (optional) */
  Höhe: 200px; / * Muss eine definierte Höhe haben */
}

 <div class = "container">
  <p> vertikal zentrierter Text </p>
</div>

• align-items: center verarbeitet die vertikale Ausrichtung.
• Funktioniert perfekt für einzelne Zeilen oder Textblöcke.
• Auch toll für reaktionsschnelle Layouts.

2. Verwenden Sie CSS Grid

CSS Grid ist ein weiterer moderner Ansatz, der ähnlich wie Flexbox funktioniert.

 .Container {
  Anzeige: Grid;
  Orts-Element: Zentrum; / * Zentriert sich sowohl vertikal als auch horizontal */
  Höhe: 200px;
}

 <div class = "container">
  <Pan> Zentrierter Text </span>
</div>

• place-items: center ist eine Abkürzung für align-items und justify-items .
• Großartig, wenn Sie bereits Layout verwenden.

3.. Verwenden Sie line-height (nur für einzelne Zeilen)

Wenn der Container eine feste Höhe hat und Sie eine einzelne Textlinie zentrieren, passen Sie die line-height an die Höhe des Containers an.

 .Container {
  Höhe: 60px;
  Zeilenhöhe: 60px; / * Gleich wie Höhe */
  Text-Align: Mitte;
}

 <div class = "container">
  <Pan> Zentrierte Linie </span>
</div>

• Einfach und effektiv für Tasten oder NAV -Links.
• Funktioniert nicht für mehrere Zeilen oder dynamische Inhalte.

4. Mit vertical-align mit display: table-cell

Diese Methode ahmt das Tabellenverhalten nach, ohne die tatsächlichen Tabellen zu verwenden.

 .Container {
  Anzeige: Tabellenzelle;
  vertikaler Align: Mitte;
  Höhe: 100px;
  Breite: 200px;
  Text-Align: Mitte;
}

 <div class = "container">
  <p> Zentrierter Text </p>
</div>

• Benötigt ein Elternteil mit display: table , falls nicht direkt in einer Tabellenzelle.
• Weniger flexibel als Flexbox oder Gitter, funktioniert aber in älteren Browsern.

5. Verwenden Sie absolute Positionierung und Transformation

Nützlich beim Umgang mit Overlays oder modalen Headern.

 .Container {
  Position: Relativ;
  Höhe: 200px;
}

.Container p {
  Position: absolut;
  Top: 50%;
  Links: 50%;
  Transformation: Translate (-50%, -50%);
  Rand: 0;
}

 <div class = "container">
  <p> zentriert mit Position </p>
</div>

• top: 50% bewegt die Oberseite des Textes in die Mitte.
• transform: translate(-50%, -50%) verschiebt es um die Hälfte seiner Breite und Höhe zurück.
• Funktioniert unabhängig von der Behältergröße.

Schlüsseltipps

• Stellen Sie immer sicher, dass der Container eine definierte Höhe (oder min-Höhe) für die vertikale Ausrichtung aufweist.
• Flexbox ist normalerweise die beste Wahl für moderne Layouts.
• Vermeiden Sie vertical-align auf Blockelementen-es funktioniert nur auf Inline-, Inline-Block- oder Tabellenzellen.
• Bevorzugen Sie für reaktionsschnelle Designs Flexbox oder Grid über feste line-height .

Wählen Sie im Grunde die Methode aus, die zu Ihrer Layoutstruktur passt. In den meisten Fällen ist Flexbox die sauberste und am besten gewartbare Lösung.

Das obige ist der detaillierte Inhalt vonWie man Text vertikal in CSS ausrichtet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!