Why my text is not displaying right after an image?

If you are viewing this post, I think you have faced some problem inserting a text next to a picture. So there are lots of scenarios where you want your text left or right of a picture. So In this short article, I will explain how to do this.

How to put text beside a picture?

In order to insert text beside the image, we need to wrap the text and image in a DIV container. After that make the <img> element float attribute to left and give some margin to <img> element. So that there is some space in between image and text. See the code below:

.wrapper img{
	float: left;
  margin-right: 10px;
}

<div class="wrapper">
  <img src="https://via.placeholder.com/80x80.png?text=image"/>
  <span>John Doe</span>
</div>

You can also insert the text to the left of an image. In order to do that, change img tag float attribute to right. Also, you need to give the wrapper class a specific width. Otherwise, the image will move at the end of the wrapper. But sometimes we also need the text vertically middle.

How to align text vertically centre after an image?

To align text vertically, we need to set the wrapper element as flex. Make sure align-items & justify-content property are “center” and set the span element left-padding. Check the below code:

.wrapper-middle{
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper-middle span{
  padding-left: 10px;
}

<div class="wrapper-middle">
  <img src="https://via.placeholder.com/80x80.png?text=image"/>
  <span>John Doe</span>
</div>

Check the live demo at JSFiddle