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

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ć).Wyrównanie pionowe środkowe na znaczniku zakotwiczenia w linii blokowej

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.

Źródło

2012-05-03 Travis

Bardzo mi przykro, że nie musisz się martwić o IE7 :) –

Jeszcze przy 20% we wszystkich używania IE na naszej stronie. Łapię się na to, że patrzę na tę liczbę co tydzień. :) – Travis

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.

Źródło

2012-05-03 19:04:42 Gats

W pobliżu zaznaczenia tego jako odpowiedzi. Czy możesz wyjaśnić łańcuch ustawień "wyświetlania"? – Travis

Kieruje reklamy do różnych przeglądarek. – Gats

Blok wbudowany służy do wyzwalania hasLayout w IE7, co musi się zdarzyć, że nie wpłynie na mozilla. Jest to dość dziwaczne, ale ostatnio przeszliśmy przez to dla etykiet wejściowych, które wymagają pionowego wyrównania do środka i zawijania tam, gdzie etykieta staje się zbyt długa. Działa bardzo ładnie. – Gats

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;

Źródło

2012-05-03 18:58:28 Jrod

Przepraszam, powinienem był wspomnieć, że przycisk i znaczniki muszą być w stanie obsłużyć wiele linii tekstu. Będę edytować pytanie. – Travis

-2

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

Źródło

2016-10-06 18:25:35

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

Odpowiedz

Powiązane problemy