Home > CSS > Text neben Bild vertikal ausrichten (zentrieren)

Text neben Bild vertikal ausrichten (zentrieren)

Zu einem guten Artikel macht sich ein schönes zur Thematik passendes Bild im Content ganz gut und intensiviert die Vorstellungskraft des Lesers. In einer HTML Seite kann der Text beliebig positioniert werden. Der Text kann entweder oberhalb oder unterhalb, aber genauso rechts oder links, d.h. fließend neben dem Bild platziert werden. Bei der Platzierung von Textinhalt auf Webseiten bedarf es einer Ausrichtung.

Wenn ein Satz neben einem Bild im HTML Code platziert wird, wie im folgenden Beispiel, dann sitzt sowohl der Text als auch das eingebundene Bild auf einer Grundlinie.

[html]
<html>
<head>
<title>Textbeispiel</title>
</head>
<body>
<img src="bild.jpg" /> Text neben Bild
</body>
</html>
[/html]

Die Eigenschaft vertical-align hat für das img-Tag standardmäßig den Wert baseline definiert. Das Attribut vertical-align kann per CSS insgesamt 10 verschiedene Werte annehmen, nämlich: baseline, text-bottom, text-top, bottom, top, middle, sub, super, length sowie Angaben in Prozent.

Bei text-bottom wird der Text das Bild am unteren Schriftrand ausgerichtet wird, die Option text-top wie der Name schon sagt analog am oberen Schriftrand. Die beiden Werte bottom und top bewirken im Prinzip das selbe wie die beiden zuvor erwähnten Werte, jedoch gilt die Regel dann nicht nur für Text, sondern auch alle anderen Elemente auf der Website.

[css]
// am unten Schriftrand
img {
vertical-align: text-bottom;
}

// am oberen Schriftrand
img {
vertical-align: text-top;
}

// am unten Schriftrand für alle Elemente
img {
vertical-align: bottom;
}

// am oberen Schriftrand für alle Elemente
img {
vertical-align: top;
}

[/css]

Um einen Text neben einem Bild vertikal zu zentrieren, muss man den Wert middle setzen. Das HTML-Element, in unserem Fall der Text, wird dadurch mittig ausgerichtet und befindet sich im Mittelpunkt der Höhe (Mitte). Besonders bei kleinen Icons, die neben dem Infotext stehen, sollte man das Bild ausrichten um die Zugehörigkeit zu verdeutlichen und eine schönere Darstellung zu erreichen.

[css]
// vertikal mittig neben Text
img {
vertical-align: middle;
}
[/css]

Der Wert super stellt das Inlineelement höher, bei sub wiederum wird das Inlineelement tiefer gestellt.

[css]
// höher stellen
img {
vertical-align: super;
}

// tiefer stellen
img {
vertical-align: sub;
}
[/css]

Mit dem Wert lenght und einer Pixelangabe wie zum Beispiel 5px, kann das Inlineelement ausgehend von der Grundlinie um die Pixelangabe beliebig nach oben (5px) oder unten (-5px) verschoben werden.

[css]
// 5 Pixel nach oben
img {
vertical-align: lenght 5px;
}

// 5 Pixel nach unten
img {
vertical-align: lenght -5px;
}
[/css]

Genau wie beim oberen Beispiel mit festen Pixelangaben, kann man auch Prozentangaben nutzen um Elemente höher zu stellen. Die prozentuale Angabe bezieht hierbei auf die Höhe der Zeile (Line) = line-height.

[css]
// 50 Prozent nach oben
img {
vertical-align: lenght 50%;
}

// 50 Pronzent nach unten
img {
vertical-align: lenght -50%;
}
[/css]

Für bestimmte Elemente würde ich persönlich standardmäßig ein middle im CSS einsetzen. Viel Erfolg beim Ausrichten Eurer Bilder und Icons. ;)

  1. Bisher keine Kommentare
  1. Bisher keine Trackbacks