Wyrównanie pionowe środkowe na znaczniku zakotwiczenia w linii blokowej

Question

Potrzebuję, aby moje łącza i przyciski wyglądały tak samo, ale nie udało mi się wyrównać w pionie tekstu w znaczniku "a" w taki sam sposób, jak znacznik "button". Ważne jest, aby pamiętać, że znaczniki muszą być w stanie obsłużyć wiele wierszy tekstu (a więc wysokość linii nie będzie działać).

a,button { 
    display: inline-block; 
    -moz-box-sizing: border-box; 
    width: 150px; 
    height: 150px; 
    vertical-align: middle; 
    border: 1px solid #000; 
    text-align: center; 
} 

Zobacz poniższy jsfiddle:

http://jsfiddle.net/bZsaw/3/

Jak widać, mogę zmusić go do pracy z kombinacją znacznika rozpiętości wewnątrz i ustawienie „wyświetlania: stół” do "a" i ustawienie "display: table-cell" i "vertical-align: middle" na zakres, ale to nie działa w IE7.

a,button { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
} 

a { 
    display: table; 
    -moz-box-sizing: border-box; 
} 

a span, button span { 
    vertical-align: middle; 
    text-align: center; 
} 

a span { 
    display: table-cell; 
} 

Szukam prostego rozwiązania tylko CSS.

Answer 1

Jedynym niezawodnym sposobem znalazłem tekst wyrównane i umożliwić zawijanie tekstu, jeśli robi się zbyt długo z podejściem 2 pojemnika.

Pojemnik zewnętrzny powinien mieć wysokość co najmniej podwójnej wysokości określonej dla pojemnika wewnętrznego. W twoim przypadku oznacza to:

a { 
    width: 150px; 
    height: 150px; 
    border: 1px solid #000; 
    text-align: center; 
    line-height: 150px; 
    display: block; 
} 

a span { 
    display:inline; 
    display:inline-table; 
    display:inline-block; 
    vertical-align:middle; 
    line-height: 20px; 
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight)/2) + "px" : "0"); 
} 

Dodaj element pływający w tagu, jeśli chcesz wszystko w linii. Oto zaktualizowany przykład z długim tekstem również w tagu A. http://jsfiddle.net/bZsaw/13/

Możesz ustawić wysokość linii na przęśle na dowolną wartość i jeśli jest ona mniejsza niż połowa wysokości linii nadrzędnej, wyśrodkuj ORAZ dopuść zawijanie tekstu, jeśli tekst przekracza szerokość kontenera nadrzędnego. Działa to we wszystkich nowoczesnych przeglądarkach, o ile wiem.

Answer 2

Jeśli twój tekst nie będzie większy niż szerokość pudełka, możesz ustawić wysokość linii równą wysokości pudełka.

line-height:150px;

Answer 3

Zastosowanieline-height:150px; i display-inline:block;