In this tutorial I shall show you how you can add image and text side by side using HTML and CSS.
Let’s start step by step.
Create new document and write basic html code
In the above screenshot you will see I have created a basic HTML5 document. Which has the basic html declaration tag and head tag and some necessary tags in it and the body tag where we shall write our code.
Add image and text in document
In the above screenshot you will see I have added a div inside the body and given the class of name “container”. Then I have added an image and a paragraph in the container div. Now let’s render it in the web browser to see the changes.
In the above screenshot you will see the rendered html document in the web browser. Image and text appears. Now lets resize the image and align the text side by side.
Align image and text side by side
In the above screenshot you can see I have added a style to align image and text side by side. Now let’s explain it line by line.
On line number 9 I have added style for body and given the margin of 0 so that the body could have zero margins ( by default body leaves some margins).
On line 12 I have added style to the container class. I have added width property and given 300px width and added the flex property and align items to center. By using these properties, the image and text will be aligned side by side.
After fixing the image and text by using the parent container. Now on line 17 I have added some properties to the image. I have added the width of 50px and margin to the right of 20px, so that the image could look beautiful and some away from text with margins.
Now let’s render the document in the web browser.
In the above screenshot you can see the final results. The image is on the left side and the text on the right side with beautiful arrangement.
Congratulations we have successfully aligned the image and text side by side using HTML and CSS.
You may also like: