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

Spread the love

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 can use flexbox.

For instance, we write

<div class="box">
  <img src="https://picsum.photos/200/300" />
  <span style="">Works.</span>
</div>

to add an img and a span in a div.

Then we write

.box {
  display: flex;
  align-items: center;
}

to make the div a flex container.

And we use align-items: center; to vertically center the items inside.

Conclusion

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

Leave a Reply

Your email address will not be published. Required fields are marked *