Vertically align text next to an image using CSS

In this tutorial, we will learn how to vertically align text next to an image using CSS with the help of examples? By Shahnail Khan Last updated : July 12, 2023

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 using CSS?

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

Vertically align text next to an image 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 using CSS | Example 1

Vertically align text next to an image 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 using CSS | Example 2

CSS Examples »




Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.