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

08 Feb, 2022
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="https://media.geeksforgeeks.org/wp-content/uploads/20200327230544/g4gicon.png"            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="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.
blalverma92
CSS-Misc
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript