How to align text vertically center in a DIV element using CSS
Answer: Use the CSS property "
If you will try to align the text inside a div using the CSS rule
vertical-align: middle; you won't succeed. Suppose you have a div element with the height of 50px and you have placed some link inside the div that you want align vertically center. The simplest way to do it is — just apply the
line-height property with value equal to the height of div which is 50px.
The concept behind this trick is — if the
line-height value of the element is greater than the value of the
font-size for the element, this difference (called the "leading") is cut in half and distributed evenly on the top and bottom of the in-line box that align the inline elements vertically center to the element .
ExampleTry this code »
<title>Align Text Vertically Center Using CSS</title>
border: 1px solid #666;
<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a>