Skip to content

Vertically center align text in a div

Find out how to align text vertically inside a div. In this article you will learn various ways to vertically center align text inside a div using CSS.

Use CSS vertical-align Property

The vertical-align property is used to center align vertically inline elements.

<div style="vertical-align: middle;">

Use CSS line-height Property

Another trick to vertically center align text inside a div is line-height property. When you set the line-height of a element inside div to the same size of its parent, you can center the text vertically.

<div height="100px" width="100px">
<p line-height="100px">
Poopcode, we poop code!
</p>
</div>
See also  Vertical text with horizontal letters in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.