Vertically align text next to an image

PloMar
Posts: 48

Vertically align text next to an image

Hello
I have the following html code. I try to center vertically a text next to an image, both into a Div.

Code: Select all

<div> <img src="image.jpg" style="width:200px; height:65px" /> <span style="vertical-align: middle">Doesn't work.</span> </div>
If I add "vertical-align: top;" it does work, the text is displayed on top. Why won't "vertical-align: middle;" work?

MarPlo
Hi,
Try to add "vertical-align: middle;" to both elements; <img> and text.
And, if you want to have multiple lines of text centered vertically next to image, add the text into a Div and apply "display: inline-block;" to it.
Example:

Code: Select all

<style> #dv1 { position: relative; margin: 3px auto; width: 80%; border: 1px solid #33e; text-align: center; padding: 4px; } #dv1 img { width: 200px; height: 65px; vertical-align: middle; } #dv1 div { display: inline-block; vertical-align: middle; } </style> <div id="dv1"> <img src="image.jpg" alt="Image" /> <div>Perfectly centered.<br> Other line of text.</div> </div>
Demo:
Image
Perfectly centered.
Other line of text.

Similar Topics