How to Vertically Align Text Next to an Image using CSS ?

Last Updated : 23 May, 2024

Adding images into our websites is a common practice, and there are situations where text must be vertically aligned alongside an image. For example, a user’s name should appear immediately next to their profile picture, vertically aligned for optimal readability . In this article, we will see how to align text next to an image using various methods.

Approaches Vertically Align Text Next to an Image:

Two effective methods can be used to vertically align text next to an image are:

Using flexbox
Using vertical-align CSS property

1. Using flexbox:

In this approach, we will use flexbox. For this, we will use CSS display property combined with align-items property. We need to create a parent element that contain both image and text. After declaring the parent element as flexbox using display: flex; we can align the items to the center using align-items: center;.

Syntax:

.class_name { 
    display: flex;
    align-items:center;
}

Example: This example uses flexbox to vertically align text next to an image using CSS.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to Vertically Align Text
        Next to an Image using CSS ?
    </title>
    
    <style>
        .aligned {
            display: flex;
            align-items: center;
        }
         
        span {
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <div class="aligned">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
            width="50" alt="">
            
        <span>GeeksforGeeks</span>
    </div>
</body>

</html>

Output:

2. Using vertical-align CSS property:

In this approach, we don’t need to wrap our element in a parent element and use vertical-align property to vertically align elements directly.

Syntax:

.class_name { vertical-align: middle; }

Example: This example uses vertical-align property to vertically align text next to an image using CSS.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to Vertically Align Text
        Next to an Image using CSS ?
    </title>
    
    <style>
        img {
            vertical-align: middle;
        }
    </style>
</head>
 
<body>
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"
            width="50" alt="">
            
    <span>
        GeeksforGeeks (using vertical-align)
    </span>
</body>
 
</html>

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.