Sometimes, we want to vertically align text inside a flexbox with CSS.
In this article, we’ll look at how to vertically align text inside a flexbox with CSS.
How to vertically align text inside a flexbox with CSS?
To vertically align text inside a flexbox with CSS, we can use the justify-content
and align-item
properties.
For instance, we write
.parent {
align-items: center;
display: flex;
justify-content: center;
}
.child {
display: flex;
align-items: center;
}
to make the elements with class parent
a flex container that has flex direction horizontal.
Then we use justify-content: center;
and align-items: center;
to horizontally and vertically center its child items respectively.
Then we vertically center the items with class child
with align-items: center;
.
Conclusion
To vertically align text inside a flexbox with CSS, we can use the justify-content
and align-item
properties.