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.
