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:
.container {
display: flex;
align-items: center;
}
Practical example
In this example, we present how to use flexbox (display: flex) with align-items: center property to vertically align text next to the image.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.container {
display: flex; /* <--- required */
align-items: center; /* <--- required */
}
</style>
</head>
<body>
<div class="container">
<img src="/static/bucket/1631898942509-VMYrnXyYZv--image.png"
alt="dirask-logo"
style="width:100px;height:100px;" />
<span>Example text...</span>
</div>
</body>
</html>