ADVERTISEMENT
ADVERTISEMENT

Vertically align text next to an image

Learn how to vertically align text next to an image using CSS?
Submitted by Shahnail Khan, on March 24, 2022

An image embedded in a webpage makes a website captivating. At times, we need to add text next to an image. The text needs to be either vertically aligned or horizontally aligned. In this tutorial, we'll discuss how to vertically align text next to an image?

There are 2 ways by which text can be vertically aligned next to an image.

1) By using CSS Flexbox properties

CSS properties that hold significance here are:

We have to set the value of display property to "flex" and align-items property to "center". These properties will be applied to the container class elements.

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vertically align text</title>
   </head>
   
   <style>
      .container{
      display: flex;
      align-items: center;
      }
      img{
      border: 2px solid black;
      }
      h2{
      margin: 20px;  
      }
   </style>
   
   <body>
      <div class="container">
         <img src="https://i.pinimg.com/150x150/61/35/fb/6135fb1c66bcc02b4bb9a46dcb85b0db.jpg" width="200px">
         <h2>Welcome to IncludeHelp</h2>
      </div>
   </body>
</html>

Output:

Vertically align text next to an image | Example 1

2) By using CSS vertical-align property

The CSS property that holds significance here is the vertical-align property. Set the value of vertical-align property to the "middle".

Note: Make sure to write text inside <span> tag only to use this method.

Example:

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vertically align text</title>
   </head>
   
   <style>
      img{
      border: 2px solid black; 
      vertical-align: middle;
      }
      .includehelp{
      font-size: x-large;
      }
   </style>
   
   <body>
      <img src="https://i.pinimg.com/150x150/61/35/fb/6135fb1c66bcc02b4bb9a46dcb85b0db.jpg" width="200px">
      <span class="includehelp">
      Welcome to IncludeHelp (text aligned vertically using vertical-align)
      </span>
      </div>
   </body>
</html>

Output:

Vertically align text next to an image | Example 2

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.