How to align text after an image with CSS in HTML

In this article, we’ll look at how to align text after an image, that is, make the image and text to be side by side on your web page, using only CSS.

What’s up programmer, okay? Let’s learn how to put an image next to a text!

Watch this content on YouTube:

The big idea behind this technique is to leave the image beside a text

The image is a block element, that is, it has a display block by default

That’s why it takes up 100% of the width, and the text is thrown under it

What we have to do is leave both elements as inline-block, so we have one next to the other

See a practical example:

<!DOCTYPE html>
<html>
 <head>
  <title>Como alinhar texto depois da imagem</title>
  <meta charset="utf-8">
 </head>
 <body>
  <img src="bg-img.jpg">
  <p>Este é um texto ao lado de uma imagem!</p>
 </body>
</html>

Here I simulated what happens in everyday life, an image and a paragraph describing it

But this way, as you may know, the text and image will not be side by side

See how it looks in the browser:

Well, it was the expected behavior and what must be happening there

Now let’s see the CSS we need to add to adjust this:

img {
 width: 500px;
 height: 500px;
}

img, p {
 display: inline-block;
}

Now with this display rule, image and text will be aligned, check it out:

Now the problem is solved!

But the text is at the bottom of the image, we can leave them aligned at the top too

Adding float with left to this, this way the text will be aligned on top, see the code:

img, p {
 float: left;
}

Check out the return:

And so we’ve covered all the ways to align text next to an image!

Conclusion

In this article, we saw how to align text after the image in two ways

In the first one, leaving both elements, img and text, with display and inline-block

The second way was leaving both elements with float and left

The only difference using float, the text is also aligned to the top of the image.

How to align text after an image with CSS in HTML