Bild & Text auf gleicher höhe

[RMS]

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:

<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>

 

[SpiceLab]

a img {vertical-align:middle}

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textausrichtung/vertical-align

 

[rince1984]

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.

<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