Categories
CSS HTML

Vertically align text next to an image with CSS

If we have image follwed with text and need to be aligned verically, we can do this by simply setting “vertical-align:middle;” to image or we can use css property flexbox for this type of layout. Most of us will struggle with the middle aligment of images with text.

Vertically align text next to an image with CSS

Here are some example for align image vertically align with text:

In this case it’s very easy, just apply the vertical align to the image. Considering it’s all in one line, so you have to align the image, not the text.

<div>
   <img style="vertical-align:middle" src="some-image.png">
   <span style="">vertically align text next to an image with CSS</span>
</div>

Here is the another method/way to vertically align image with text. We can use css “flex” property to do this, simply put both image and text in a div, apply display:flex and align-items:center; to the div.

.container {
   display: flex;
   align-items:center;
}
<div class=“container”>
   <img style="vertical-align:middle" src="some-image.png">
   <span style="">vertically align text next to an image with CSS</span>
</div>

Leave a Reply

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