Sometimes, we want to vertically align text in a div with CSS.
In this article, we’ll look at how to vertically align text in a div with CSS.
How to vertically align text in a div with CSS?
To vertically align text in a div with CSS, we use flexbox.
For instance, we write
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on two lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>
to add some elements.
Then we write
li {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
to make the li elements flex containers with display: flex;.
And then we set the flex direction to vertical with flex-direction: column;.
We vertically center content with justify-content: center;.
And we horizontally center content with align-content: center;
Conclusion
To vertically align text in a div with CSS, we use flexbox.
