How to Align Text Vertically Center Using CSS

In this tutorial, learn how to align text vertically center using CSS. The short answer is: use the vertical-align property of CSS. You can use some other CSS properties given here to center align text vertically.

Align Text Vertically Center with CSS vertical-align Property

To align text vertically center, you can use CSS property vertical-align with center as value. You also need to use display:table-cell property of CSS to make text vertically center.

Add some width and height to the div element and align text horizontally center also. To make text horizontally center, you have to use text-align:center.

Output

This is the Vertically Aligned content.

The above example contains the div element with some background color. The text in the div element is vertically center aligned.

Below are some other methods are given to center align text vertically. But this method is the best method you can use to make text vertically center.

Vertically Align Text Center with CSS line-height Property

You can use CSS property line-height to align text center in a div. Use the same value for this property as you will give for the height of the div.

If the text contains more than one line, it may take another line out of the box. To make text looks properly arranged, you may also have to use text-align:center.

note: Use this method only if you have single line text content.

Output

Vertically Aligned.

The above example center aligns only single line text content. Add some more lines to the above text content. The other lines may visible outside of the div element.

Center Align Text Vertically Using CSS Top and Bottom Padding

In addition to all the above-given example, you can use padding for top and bottom. You don’t need to use the height for the div element. Use the padding top and bottom for making the div height correct.

Output

This is the Vertically Aligned content.

The above example contains the padding top and bottom for vertically center alignment. Also, apply some width to the div element to make a box.

Hope, you like this tutorial of how to align text vertically center using CSS. If you have any query regarding the tutorial, please comment below.

Also tell me, which method are you using to vertically center align text.

Leave a comment

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.