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