In this tutorial, you will learn to align text and image in the same line using CSS in HTML.
Using the float property of CSS will allow you to place an image and text on the same line without breaking the line break. Or Alternatively, you should use the flexbox method of CSS that uses the flex property to make sure that images and lines are aligned in the same line.
Using the method outlined above will ensure that your images and text are both aligned on the same line of text. Let’s take a look at an example of code below.
How To Align Image and Text In Same Line In HTML Using CSS
In general, there are two ways to make sure everything is arranged up in a line. But I think the second method is better because it works in all situations.
1. Using Float Property Of CSS
Now let us see how the float property of the CSS can help us achieve this to get the images and text in the same line.
<!DOCTYPE html>
<html>
<body>
<style>
body {
background-color: black;
}
img {
width: 200px;
float: left;
margin-right: 10px;
}
</style>
<img src="testImage.jpg" />
<div>
The Text That you want to aling long in a line.
</div>
</body>
</html>
Output:
As you can see in the above output, I was able to align the image and text in a single line by utilizing the float:left alignment in the style section of the image.
Although the above method has one disadvantage, when you try to resize the screen, the image and text will no longer be aligned in a single line and will instead stack up. In order to overcome this disadvantage, you will need to use the flexbox technique.
2. Using Flexbox in CSS
So, when you use the above solution and try to change the size of the screen, the text and image will no longer be on the same line. To solve this problem, I will be using the flexbox. This will make sure that both images and text are always in line, no matter how big the screen is.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<img src="testImage.jpg" />
The Text That you want to aling long in a line.
</div>
</body>
</html>
body {
background-color: black;
}
.container{
display: flex;
}
img {
width: 200px;
}
Output:
As you can see in the above image, flexbox makes sure that the image and text stay in one line, no matter how big or small the screen is. You can see this in the picture above.
Wrap Up
I hope you learned how to put images and text in the same line with CSS and HTML. I’ve given you two ways to solve this problem, but I’d rather you use the second one because it’s the most up-to-date method in the field.
Make sure to tell me if you know of another way to do this that I haven’t talked about above. I’ll add it here if I can find the time.
Further Read:
