Bild & Text auf gleicher höhe

RMS

Grünschnabel
#1
Moinsen,
Wie schaffe ich das mein Text und Bild auf gleicher höhe ist?

Beispiel:

wie man sehen kann ist der Text unten!

Beispiel 2:

so möchte ich das gerne haben, das der Text mittig ist!

Mein Code:
Code:
<div style="position:absolute; bottom:0; height:30px;">
<a href="#"><img src="twitter.png"></a> <a href="#"><img src="facebook.png"></a> <a href="#"><img src="youtube.png"></a> Mein Text!
</div>
 
#3
Alternativ kannst du dem Elternelement (dein umschließendes DIV) die Eigenschaft "display: table" geben. Den Text des Inhalts musst du mit einem Element umschließen (z.B. DIV) und diesem Element die Eigenschaften "display: table-cell; vertical-align: middle;" zuweisen. Folgend dein Code angepasst. Ggf. musst du dem Elternelement noch eine Breite zuweisen.

HTML:
<div style="position:absolute; bottom:0; height:30px; display: table;">
<a href="#"><img src="twitter.png"></a> <a href="#"><img src="facebook.png"></a> <a href="#"><img src="youtube.png"></a> <div style="display: table-cell; vertical-align: middle;">Mein Text!</div>
</div>
jsFiddle
 

Neue Beiträge