Skip to content
Related Articles

Related Articles

How to Vertically Align Text Next to an Image using CSS ?
  • Last Updated : 02 Apr, 2020

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.






<!DOCTYPE hyml>
<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.




<!DOCTYPE hyml>
<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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :