Hey Readers!

Web pages are incomplete without images. Images add visual appeal to our websites.

There are situations when we want to put lines of text right next to an image. The text might be some sort of description of the image, or anything. The text will look good only if it is vertically aligned next to the image properly. 

Doing this gets a little annoying even if trying out the simplest ways. 

I am providing some easy approaches to achieve this.

CSS TABLES

 Some might find this a little tricky.

div {
    display:table;
}

span {
    vertical-align: middle;
    display: table-cell;
}

Sadly, the table property is not supported for IE7 and below. 

FLEXBOX

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

img {
    min-width: 200px;
}

LINE HEIGHT

This approach is the easiest. We set the line-height of the text equal to the height of the image.

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Some Text.</span>
</div>

VERTICAL-ALIGN:MIDDLE

Set the vertical align property to the image.

<div>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Some Text.</span>
</div>

OUTPUT :

Keep Coding!