Bir satır içi bloğu etiketi üzerindeki dikey hizalama orta

Question

Bağlantılarımın ve düğmelerin aynı görünmesini istiyorum, ancak metni "a" etiketi içinde dikey olarak hizalayamadım. "düğme" etiketi. Etiketlerin birden çok metin satırını işlemesi gerektiğine dikkat etmek önemlidir (bu nedenle satır yüksekliği çalışmayacaktır). için: "tablosu ekran"

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

Eğer ben bir aralık etiketinin bir kombinasyonu içinde ve ayar ile çalışmak alabilirsiniz görebileceğiniz gibi:

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

aşağıda jsfiddle bakın "a" ve "display: table-cell" ve "vertical-align: middle" değerlerini aralığa ayarlama, ancak IE7'de çalışmaz.

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

Sadece basit bir CSS çözümü arıyorsunuz.

Answer 1

Ben dikey hizalama metnini buldum ve çok uzun alırsa metnin kaydırmayı izin ettik için tek güvenilir yolu 2 konteyner yaklaşımıyla olduğunu.

Dış kapsayıcı, iç kap için belirtilen en az iki katı bir çizgi yüksekliğine sahip olmalıdır. Senin durumunda bu şu anlama gelir: satır içi şeyi istiyorsanız

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

bir etikete sol şamandıra ekleyin. İşte http://jsfiddle.net/bZsaw/13/

Sen ne istersen için yayılma üzerinde satır yüksekliğini ayarlayabilirsiniz .. çok bir etiketi uzun metin ile güncellenen örnek ve ebeveynin hat yüksekliğinin yarısından daha az ise, o olacak metin VEYA ana kapsayıcı genişliğini aşarsa metin sarmalamaya izin verin. Bu, tüm modern tarayıcılarda bildiğim kadarıyla çalışır.

Answer 2

Metniniz kutunun genişliğinden daha büyük olmayacaksa, satır yüksekliğini kutunun yüksekliğine göre ayarlayabilirsiniz.

line-height:150px;

Answer 3

Kullanımline-height:150px; ve