Czy jest to najprostsze i najbardziej elastyczne rozwiązanie do pionowego wyrównania tekstu w elemencie bloku?

Question

mogę być pierwszą osobą, do odkrywania tego (lub przynajmniej dokument to w internecie):

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

To działa, ponieważ wzrasta kodowych wysokość linii do 100% kontenera, ale nie rozumiem, dlaczego ustawienie vertical-align: middle; na <span></span> wpływa na tekst.

Nie znalazłem tego rozwiązania udokumentowanego w Internecie, a jest ono prostsze i bardziej elastyczne niż inne, które znalazłem. Dodatkowo powinien działać we wszystkich przeglądarkach od IE6 (oczywiście zastępując selektor podrzędny czymś innym).

Aby spełnić wymóg pytania, czy jest to najprostsze i najbardziej elastyczne rozwiązanie odwiecznego pytania?

Answer 1

Używam atrybutu wyświetlania CSS table-cell najłatwiejszą metodą.

Zobacz ten jsFiddle

a CSS:

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

Answer 2

Ten artykuł opisuje wszystkie pionowe technik ustawania (to wiem od :)), opartemu podejście zostało zrobione. http://phrogz.net/css/vertical-align/index.html