Question

I could be the first person to discover this (or at least document it on the web):

HTML:

<div>Vertically Aligned Text<span></span></div>

CSS:

div
{
    height: 100px; /* or whatever % etc. */
}

div > span
{
    display: inline-block;
    visibility: hidden;
    height: 100%;
    vertical-align: middle;
}

It works because the code increases the line-height to 100% of its container, but I don’t understand why setting vertical-align: middle; on the <span></span> affects the text.

I have not found this solution documented on the web, and it is simpler and more flexible than others that I have found. Plus it should work on all browsers from IE6 onwards (obviously replacing the child selector with something else).

To fit the question requirement, is this the simplest and most flexible solution to an age-old question?

Answer 1

I find using the CSS display attribute table-cell the easiest method.

See this jsFiddle

And the CSS:

div
{
    height:100px; /* or whatever % etc. */
    border: solid 1px black;
    vertical-align : middle; 
    display : table-cell;
}