EN
CSS - vertically align text next to image
0 points
In this article, we would like to show you how to vertically align text next to the image using CSS.
Quick solution:
xxxxxxxxxx
1
.container {
2
display: flex;
3
align-items: center;
4
}
In this example, we present how to use flexbox (display: flex
) with align-items: center
property to vertically align text next to the image.
xxxxxxxxxx
1
2
<html>
3
<head>
4
<style>
5
6
.container {
7
display: flex; /* <--- required */
8
align-items: center; /* <--- required */
9
}
10
11
</style>
12
</head>
13
<body>
14
<div class="container">
15
<img src="/static/bucket/1631898942509-VMYrnXyYZv--image.png"
16
alt="dirask-logo"
17
style="width:100px;height:100px;" />
18
<span>Example text...</span>
19
</div>
20
</body>
21
</html>