Home »
CSS
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 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
CSS Examples »