“`html
The Flexbox Layout can be utilized to position text vertically adjacent to an image.
CSS (Cascading Style Sheets) is employed to design the web page according to our preferences. When creating web pages, it’s common to position text alongside an image and align them vertically. This is particularly crucial for sections like profiles, articles, or product displays. Achieving proper alignment enhances readability and improves the overall appearance of your content. In this blog, we will examine techniques such as flexbox, grid, table, and vertical-align.
Contents Overview:
Techniques for Vertically Aligning Text Next to an Image
CSS (Cascading Style Sheets) properties are utilized to align text vertically alongside an image. Let’s review them below.
Technique 1: Utilizing Flexbox
This is the most preferred technique as it provides automatic alignment and results in the most responsive web pages for 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; /* Vertically aligns text */
gap: 20px; /* Adds spacing 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://blog.onlineexamcheating.com/wp-content/uploads/2025/03/localimages/maxresdefault.jpg" alt="Sample Image">
<p class="text">Text aligned vertically next to an image utilizing Flexbox.</p>
</div>
</body>
</html>
</pre>Output:
Explanation: The display: flex property transforms the container into a flexbox, while align-items: center ensures the text and image are vertically aligned. The space between the image and text is established by the gap of : 20px.
Technique 2: Utilizing CSS Grid
This method allows you to manage the positioning of the text and image effectively. It simplifies vertical alignment of items within 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 occupies auto width, text fills remaining area */
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://blog.onlineexamcheating.com/wp-content/uploads/2025/03/localimages/maxresdefault.jpg" alt="Sample Image">
<p>Text aligned vertically alongside an image utilizing CSS Grid.</p>
</div>
</body>
</html>
</pre>Output:
Explanation: The grid layout is established using display: grid along with grid-template-columns: auto 1fr, which dedicates one column for the image and another for the text.
Technique 3: Utilizing Table Layout
The table layout method is often employed when dealing with legacy code in place of using grid and flexbox layouts.
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://blog.onlineexamcheating.com/wp-content/uploads/2025/03/localimages/maxresdefault.jpg" alt="Sample Image">
</div>
<div class="table-cell">
<p>Text aligned vertically alongside an image through table display.</p>
</div>
</div>
</div>
</body>
</html>
</pre>Output:
Clarification: Employ display: table to enable the container to function like a table. The display: table-cell configures the alignment of items accurately. Additionally, vertical-align: middle ensures the text and image are centered.
Technique 4: Implementing vertical-align
The vertical-align attribute is applicable for inline and inline-block elements. This approach is particularly effective for small icons or text adjacent to tiny images.
Illustration:
<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://blog.onlineexamcheating.com/wp-content/uploads/2025/03/localimages/maxresdefault.jpg" alt="Example Image">
<span>Centering text adjacent to an image using inline-block.</span>
</div>
</body>
</html>
</pre>Result:
Clarification: You may utilize display: inline-block to position elements side by side. The vertical-align: middle ensures that the image and text are centrally aligned, and margin-right: 10px creates a gap between the image and the text.
Final Thoughts
The previously outlined techniques represent the most efficient methods for aligning text alongside an image. You can apply CSS properties for aligning text adjacent to an image. Approaches such as flexbox, grid, table, and vertical align are utilized to ensure the effective alignment of text and image, enhancing content readability and visual appeal.
How to Center Text Vertically Next to an Image? – FAQs
The article How to Center Text Vertically Next to an Image using CSS? first appeared on Intellipaat Blog.