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