EN
CSS - vertically align text inside flexbox
0 points
In this article, we would like to show you how to vertically align text inside flexbox in CSS.
Below we present two solutions for how to center the text depending on flex-direction property value.
In this example, we present how to vertically align text inside a flex container (flexbox) when the flex-direction property is set to row.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
height: 200px;8
width: 200px;9
background-color: #3085d6;10
color: white;11
border-radius: 5px;12
box-shadow: 5px 5px 15px gray;13
14
display: flex;15
align-items: center; /* <----- flex-start/center/flex-end */16
}17
18
</style>19
</head>20
<body>21
<div class="container">22
some text...23
</div>24
</body>25
</html>Note:
By default flex uses
flex-direction: row;so we don't need to add it.
In this example, we present how to vertically align text inside a flex container (flexbox) when the flex-direction property is set to column.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.container {7
height: 200px;8
width: 200px;9
background-color: #3085d6;10
color: white;11
border-radius: 5px;12
box-shadow: 5px 5px 15px gray;13
14
display: flex;15
flex-direction: column;16
justify-content: center; /* <----- flex-start/center/flex-end */17
}18
19
</style>20
</head>21
<body>22
<div class="container">23
some text...24
</div>25
</body>26
</html>