Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

Introduction: We often add images to our website and there are times when that text needs to be vertically aligned next to an image. For example, in case of a profile image of the user, the name of the user should be visible right after his/her profile picture and it should be vertically aligned. In this article, we will see how to align text next to an image using various methods.
Approaches: There are two methods are available to vertically align the text next to an image as given below: 
 

  • Using flexbox
  • Using vertical-align CSS property

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=
            width="50" alt="">
             
        <span>GeeksforGeeks</span>
    </div>
</body>
 
</html>


Output: 
 

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=
            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.



Last Updated : 08 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads