How about this way for vertically positioning text inside a div?

Question

I have always looked for alternative ways for middle positioning text inside a div, There are many ways out there, from javascript dynamic positioning to the latest css units vw and vh. The other day I realised that there is another way that was always right in-front of me all time along, but I never used it, namely by displaying a div as a table cell display:table-cell;vertical-position:middle http://jsfiddle.net/manolis/TPKsf/ I haven't used it yet in production but I'm wondering what are the pros and cons of using this solution.

Thanks!

Answer 1

Internet Explorer 7 and earlier versions don't support “display:table-cell”, IE8 supports, but requires a !DOCTYPE, you can find more explanation here - http://www.tutorialrepublic.com/css-reference/css-display-property.php

Alternatively you can also vertical align text in a div through setting value of the line-height property equal the height of div, like:

Your CSS:

div{
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    border: 1px solid #000;
}

Your HTML:

<div><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Contact</a></div>

The above style rule align the text inside a div vertically center or middle. You can check out this page to know how line-height works - http://www.tutorialrepublic.com/css-tutorial/css-text.php