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

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

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

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

First we have to use flexbox, to vertically align text next to an image with CSS .
For instance, we can write

<div>
  <img src="https://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 with align-items: center; in the div vertically.