html tutorial - How to align text vertically center in a DIV element using CSS - html5 - html code - html form



Answer: Use the CSS property "line-height"

If you will try to align the text within 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 got 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 that is 50px.

The concept behind this trick is — if the line-height value of the element is larger 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.

Example

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Align Text Vertically Center Using CSS - html5 - html code - html form - In 30Sec by Microsoft Award MVP - | wikitechy</title>
    <style type="text/css">
        .menu{
            height: 20px;
            line-height: 20px;
            padding: 15px;        
            border: 1px solid #666;
        }
    </style>
    </head>
    <body>
        <div class="menu">
            <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">ph.no</a>
        </div>
    </body>
    </html>

    Related Searches to How to align text vertically center in a DIV element using CSS