Signup/Sign In
PUBLISHED ON: AUGUST 27, 2021

How to vertically align text next to an image?

We often need to place some text next to the image. The text can be vertically aligned next to the image. There are several ways to do so. Here we will list out some possible solutions to vertically align text next to the image.

Vertically aligning text next to image using CSS property

The CSS property can be used to vertically align text next to the image using CSS. We used vertical-align: middle property to the image and the <span> tag to add text.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
  img{
   vertical-align: middle;
}
</style>
</head>
<body>
    <img src="pic1.png">
    <span>This is an image which is vertically aligned with image.</span>
</body>
</html>

Output

Here is the output of the above program where the text is vertically aligned next to the image.

text next to image using CSS

Vertically aligning text next to image using flex

We can also vertically align the text next to the image using flexbox. Use display: flex property of CSS and combine it with the align-items: center property. Here is an example to vertically align text next to the image using flex.

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML </title>
<style>
  .box {
   display: flex;
   align-items:center;
}
</style>
</head>
<body>
   <div class="box">
    <img src="pic1.png">
    <span>This is an image which is vertically aligned with image.</span>
   </div>
</body>
</html>

Output

Here is the output of the above program where the text is aligned next to the image.

text next to image

Conclusion

We can vertically align the text next to the image using CSS property or using flexbox property. It is quick and easy to implement it using HTML elements.



About the author: