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