How to align image and text in same line in html?
March 11, 2023Hi Friends 👋,
Welcome To aGuideHub! ❤️
To image and text in the same line in html with responsive, you have to use a flex with justify-content, and align-items css which will make the image and text side by side.
See a short example of the HTML image left text right.
<style>
.container {
display: flex;
width: 300px
}
.side {
flex: 1;
padding: 10px;
}
.side-content-center {
display: flex;
align-items: center;
}
</style>
<div class="container">
<div class="side">
<img width="100%" src="images/facebook.jpg" />
</div>
<div class="side side-content-center">
<div>
<p>Align image and text in same line in html</p>
</div>
</div>
</div>In this article, I will show multiple examples of align images and text in the same line.
- Example of image and text side by side
- Example of icon and text on the same line
Let’s start today’s tutorial example of text next to image using css
Example of image and text side by side
In this example, I used the image with text and align the image and text side by side using the css attributes.
To make align the image and text side by side, I going to use the following css which is provided by CSS.
display: flexandflex: 1to make image and text side by side with responsive.display: flexandalign-items: centercss for align image and text in the same line
To use the above class I will use css 3 and html 5 in this example to get image and text in the same line.
Let’s start coding for html image inline with text
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Align Image In HTML</title>
<style>
.container {
display: flex;
width: 300px
}
.side {
flex: 1;
padding: 10px;
}
.side-content-center {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<section>
<div>
<div class="container">
<div class="side">
<img width="100%" src="images/facebook.jpg" />
</div>
<div class="side side-content-center">
<div>
<p>Align image and text in same line in html</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>In this above example, I put image in left side and text in right side.
Here, I have provided code sandbox links for the above program for the image and text side-by-side using css. Then you can use it whenever you want and do the changes as per your requirements.
Example of icon and text on the same line
In this example, I will align the icon and text in the same line, using custom css such as flex, justify-content, and align-items.
Above mentioned css attributes help you to align icons and text in the same line.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>
<title>Buttons</title>
<style>
.icon-container {
display: flex;
border: 1px solid;
width: 150px;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<section>
<div>
<div class="icon-container">
<i style="font-size: 30px;" class="bi bi-airplane"></i>
<span style="margin-left: 10px;">Airplane</span>
</div>
</div>
</section>
</body>
</html>Here, I have provided code sandbox links for the above program for the icon and text side-by-side css. Then you can use it whenever you want and do the changes as per your requirements.
All the best 👍