Wie zentriert man Text vertikal neben einem Bild?

Leon A. -

Problem: Vertikale Ausrichtung von Text mit Bildern

Wenn Text neben einem Bild platziert wird, kann es zu Fehlausrichtungen kommen, wobei der Text am oberen Rand des Bildes beginnt. Dies kann dazu führen, dass das Layout unausgewogen wirkt, besonders wenn die Bildhöhe von der Texthöhe abweicht.

CSS-Lösungen für vertikale Textausrichtung

Verwendung der Vertical-Align-Eigenschaft

Die vertical-align-Eigenschaft kann Text vertikal neben einem Bild ausrichten. Wenden Sie diese Eigenschaft auf das Bildelement an, nicht auf den Text. Setzen Sie vertical-align: middle für das Bild, um die Ausrichtung zu erreichen:

<div>
  <img style="vertical-align: middle" src="image.jpg" alt="Bild">
  <span>Text ausgerichtet mit dem Bild</span>
</div>

Diese Methode funktioniert, weil das Bild ein Inline-Element ist und vertical-align seine Position relativ zu anderen Inline-Elementen beeinflusst. Die Anwendung von vertical-align auf das Textelement funktioniert oft nicht wie erwartet, da es nur die Position des Elements relativ zu seiner eigenen Zeilenbox beeinflusst.

Tipp: Verwenden Sie Line-Height zur Feinabstimmung

Bei der Verwendung von vertical-align können Sie die Ausrichtung durch Anpassung der line-height des übergeordneten Containers fein abstimmen. Dies kann in einigen Fällen helfen, eine perfekte Ausrichtung zu erreichen:

.container {
  line-height: 1.5;
}

Flexbox-Methode für vertikale Ausrichtung

Flexbox bietet eine zuverlässige Lösung für die vertikale Ausrichtung. Um diese Methode zu verwenden:

  1. Wenden Sie display: flex auf das übergeordnete Element an, um einen Flex-Container zu erstellen.
  2. Verwenden Sie die align-items-Eigenschaft, um den Inhalt vertikal zu zentrieren.

Hier ein Beispiel:

.container {
  display: flex;
  align-items: center;
}
<div class="container">
  <img src="image.jpg" alt="Bild">
  <span>Text ausgerichtet mit dem Bild</span>
</div>

Dieser Ansatz ermöglicht die vertikale Zentrierung mehrerer Elemente innerhalb des Containers, unabhängig von ihrer Größe. Er gibt Ihnen auch mehr Kontrolle über das Layout und den Abstand zwischen den Elementen.

Alternative Ansätze zur vertikalen Textausrichtung

Grid-Layout-Technik

Das CSS Grid-Layout bietet eine weitere Möglichkeit, Text vertikal mit Bildern auszurichten. So wenden Sie diese Methode an:

  1. Erstellen Sie einen Grid-Container:

    .grid-container {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
}

  2. Richten Sie Elemente in Gridzellen aus:

    .grid-container {
align-items: center;
}

Diese Technik ermöglicht eine präzise Kontrolle über das Layout und eignet sich gut für komplexe Anordnungen.

Tipp: Grid Template Areas für komplexe Layouts

Verwenden Sie grid-template-areas, um komplexere Layouts mit benannten Gridbereichen zu erstellen:

.grid-container {
  display: grid;
  grid-template-areas: 
    "image heading"
    "image description";
  gap: 10px;
}
.image { grid-area: image; }
.heading { grid-area: heading; }
.description { grid-area: description; }

Dies ermöglicht eine flexible Positionierung von Elementen innerhalb des Grids.

Zeilenhöhen-Methode

Die Zeilenhöhen-Methode ist ein einfacher Ansatz, der in manchen Fällen funktionieren kann:

  1. Setzen Sie die Zeilenhöhe des Containers so, dass sie der Bildhöhe entspricht:

    .container {
line-height: 60px; /* Ändern Sie dies entsprechend Ihrer Bildhöhe */
}

  2. Wenden Sie vertical-align auf das Bild an:

    .container img {
vertical-align: middle;
}

Vorteile dieser Methode:

  • Einfach umzusetzen
  • Funktioniert gut bei einzeiligem Text

Nachteile dieses Ansatzes:

  • Weniger flexibel bei mehrzeiligem Text
  • Benötigt die genaue Bildhöhe
  • Erfordert möglicherweise Anpassungen für verschiedene Bildschirmgrößen

Obwohl diese Methoden in bestimmten Fällen nützlich sein können, sind sie möglicherweise nicht so vielseitig wie die Flexbox- oder vertical-align-Ansätze für den allgemeinen Gebrauch.