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

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

I love Open Source Culture have contributed to phpMyAdmin, LibreOffice, Ant-Design and Web is my passion

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.