You can use the Flexbox Layout to align the text vertically next to an image.
CSS (Cascading Style Sheet) is used to style the web page as we want. When you design web pages, you often need to put text next to an image and align them vertically. This is important for profile sections, articles, or product listings. Getting the alignment right makes your content easier to read and looks better. Let’s explore methods such as flexbox, grid, table, and vertical-align in this blog.
Table of Contents:
Methods to Vertically Align Text Next to an Image
CSS (Cascading Style Sheet) properties are used to align the text vertically next to an image. Let’s discuss them below.
Method 1: Using Flexbox
It is the most recommended method since it provides automatic alignment and the most responsive web page for the users.
Example:
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Alignment</title>
<style>
.container {
display: flex;
align-items: center; /* Aligns text vertically */
gap: 20px; /* Adds space between text and image */
}
.container img {
width: 150px;
height: auto;
border-radius: 10px;
}
.text {
font-size: 18px;
}
</style>
</head>
<body>
<h2>Flexbox Example</h2>
<div class="container">
<img src="https://i.ytimg.com/vi/UHaLE12u1UM/maxresdefault.jpg" alt="Sample Image">
<p class="text">Vertically aligning text next to an image using Flexbox.</p>
</div>
</body>
</html>
</pre>
Output:
Explanation: The display: flex makes the container a flexbox, and align-items: center aligns the text and image vertically. The gap between the image and text is created by a gap: 20px.
Method 2: Using CSS Grid
You can choose this method to control the placement of the text and image. It makes it easy to vertically align items in rows and columns.
Example:
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Vertical Alignment</title>
<style>
.grid-container {
display: grid;
grid-template-columns: auto 1fr; /* Image takes auto width, text takes remaining space */
align-items: center;
gap: 20px;
}
.grid-container img {
width: 150px;
border-radius: 10px;
}
.grid-container p {
font-size: 18px;
}
</style>
</head>
<body>
<h2>Grid Example</h2>
<div class="grid-container">
<img src="https://i.ytimg.com/vi/UHaLE12u1UM/maxresdefault.jpg" alt="Sample Image">
<p>Vertically aligning text next to an image using CSS Grid.</p>
</div>
</body>
</html>
</pre>
Output:
Explanation: The grid layout is created using display: grid and grid-template-columns: auto 1fr, which provides one column for the image and another column for the text.
Method 3: Using Table Layout
When you are dealing with legacy code, the table layout method is considered rather than using the grid and flexbox layout.
Example:
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Alignment</title>
<style>
.table-container {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
vertical-align: middle;
padding: 10px;
}
.table-cell img {
width: 150px;
}
</style>
</head>
<body>
<h2>Table Example</h2>
<div class="table-container">
<div class="table-row">
<div class="table-cell">
<img src="https://i.ytimg.com/vi/UHaLE12u1UM/maxresdefault.jpg" alt="Sample Image">
</div>
<div class="table-cell">
<p>Vertically aligning text next to an image using table display.</p>
</div>
</div>
</div>
</body>
</html>
</pre>
Output:
Explanation: You can use display: table to make the container act like a table. The display: table-cell aligns items correctly. And vertical-align: middle centers the text and image.
Method 4: Using vertical-align
The vertical-align property is used for inline and inline-block elements. This method works well for small icons or text next to small images.
Example:
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline-Block Alignment</title>
<style>
.container {
display: inline-block;
font-size: 18px;
}
.container img {
width: 150px;
vertical-align: middle;
margin-right: 10px;
}
</style>
</head>
<body>
<h2>Inline-Block Example</h2>
<div class="container">
<img src="https://i.ytimg.com/vi/UHaLE12u1UM/maxresdefault.jpg" alt="Sample Image">
<span>Vertically aligning text next to an image using inline-block.</span>
</div>
</body>
</html>
</pre>
Output:
Explanation: You can use display: inline-block to put items next to each other. The vertical-align: middle makes sure the image and text are aligned in the middle, and margin-right: 10px adds space between the image and text.
Conclusion
The above-mentioned methods are the most effective ways to align text next to an image. You can use the CSS properties to align text next to an image. Methods such as flexbox, grid, table, and vertical align are used to align the text and image to make content easier to read and look better.
How to Vertically Align Text Next to an Image? – FAQs
1. How do I align text next to an image using CSS?
You can use display: inline-block; to place elements side by side and vertical-align: middle; to align them vertically.
2. What is display: inline-block; used for?
It allows elements to sit next to each other in a row.
3. What does vertical-align: middle; do?
It ensures that the image and text are aligned in the middle vertically.
4. How can I add space between the image and the text?
You can use margin-right: 10px; to create some space between the image and text.
5. Are there other methods for vertical alignment?
Yes, you can also use Flexbox or Grid layout for more control over alignment.