Last Updated on January 26, 2021 by Roshan Parihar
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.
Let’s find out with the useful examples given below.
Align Text Vertically Center with CSS vertical-align Property
To align text vertically center, you can use CSS property vertical-align with center as its 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style> .valigndiv{ width:200px; height:200px; display:table-cell; text-align:center; background:#ccc; border:1px solid #000; vertical-align:middle; } </style> <div class="valigndiv">This is the Vertically Aligned content.</div> |
Output
The above example contains the div element with some background color. The text in the div element is in the required position.
Below are some other methods that are given for text alignment in the vertical center position. 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 the CSS property line-height to align the 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 when you have single line text content.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .lheightdiv{ width:200px; height:200px; line-height:200px; text-align:center; background:#ccc; border:1px solid #000; } </style> <div class="lheightdiv">Vertically Aligned.</div> |
Output
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.
Using CSS Top and Bottom Padding for Vertical Alignment
In addition to the above all methods, you can use CSS padding property for top and bottom. You don’t need to use the height for the div element. It requires only to use them padding-top and padding-bottom property for making the div height correct and center align text vertically.
|
1 2 3 4 5 6 7 8 9 10 11 |
<style> .topbottompaddiv{ width:200px; background:#ccc; border:1px solid #000; padding-top:70px; padding-bottom:70px; text-align:center; } </style> <div class="topbottompaddiv">This is the Center content.</div> |
Output
The above example contains the padding-top and padding-bottom for vertically center alignment. Also, you can apply some width to the div element to make a box.
- How to center align div element horizontally using CSS
- Center align unordered list inside div using HTML and CSS
- How to center align an image inside div using HTML and CSS
I hope you like this tutorial on how to make text vertical alignment centrally using CSS.