Page 1 of 1
Vertically align text next to an image
Posted: 02 Feb 2015, 17:20
by PloMar
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?
Vertically align text next to an image
Posted: 02 Feb 2015, 17:29
by 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:
Perfectly centered.
Other line of text.