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.

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

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:

Perfectly centered.
Other line of text.

Vertically align text next to an image

Vertically align text next to an image

Vertically align text next to an image

Similar Topics