Это самое простое и гибкое решение для выравнивания текста в элементе блока по вертикали?

Question

Я мог бы быть первым человеком, который обнаружит это (или, по крайней мере, задокументирует это в Интернете):

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;
}

Это работает, потому что код увеличивает высоту строки до 100% своего контейнера, но я не понимаю, почему установка vertical-align: middle; в <span></span> влияет на текст.

Я не нашел этого решения документированным в Интернете, и оно более простое и гибкое, чем другие, которые я нашел. Кроме того, он должен работать во всех браузерах начиная с IE6 (очевидно, заменяя дочерний селектор чем-то другим).

Чтобы соответствовать требованию вопроса, это самое простое и гибкое решение для старого вопроса?

Answer 1

В этой статье описываются все методы вертикального выравнивания (которые я знаю :)), включая подход, который вы выбрали.http://phrogz.net/css/vertical-align/index.html

Answer 2

Я считаю использование атрибута отображения CSS table-cell самым простым способом.

См. Это jsFiddle

И CSS:

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