How to vertically align text next to an image with CSS?

Sometimes, we want to vertically align text next to an image with CSS.

In this article, we’ll look at how to vertically align text next to an image with CSS.

How to vertically align text next to an image with CSS?

To vertically align text next to an image with CSS, we use flexbox.

For instance, we write

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

to add an img and a span in a div.

Then we write

div {
  display: flex;
  align-items: center;
}

to make the div a flex container with display: flex;.

And we center the items in the div vertically with align-items: center;.

Conclusion

To vertically align text next to an image with CSS, we use flexbox.