2013-01-16 18 views
6

Önyükleme simgesi ve görüntünün alt tarafına nasıl hizalanılır? (Simgeler için font-awsome kullanıyorum).Metin ile önyükleme simgesi nasıl yapılır?

JSBIN: http://jsbin.com/uwupuz/2/edit

enter image description here

<div class="btn-group"> 
    <a class="btn" href="#"> 
     <i class="icon-plus"></i> 
     <span>Add</span> 
    </a> 
    <a class="btn" href="#"> 
     <i class="icon-trash"></i> 
     <span>Remove</span> 
    </a> 
    <a class="btn" href="#"> 
     <i class="icon-edit"></i> 
     <span>Edit</span> 
    </a> 
    </div> 

cevap

3

bu deneyin: http://jsfiddle.net/jonschlinkert/CBss2/1/ bu orada, ben position özelliğiyle değil karışıklık @hajpoj önerdiği gibi line-height: 1;

button screen cap

uygulandıktan sonra neye benzediği Daha sonra basamaklandırma etkisi olmayan sorunu düzeltmek için daha temiz yollar. position: relative kullanımıyla ilgili diğer problem, her simgenin aslında boyut olarak biraz farklı olmasıdır. Bunu hesaba katarak, bakımını sürdürmeye çalışın. 'un'un normal boyuttaki simgelerin çoğu için alt hizalanmış gibi görünmesi en iyisidir ve ortalamadan daha büyük bir simge kullanıldığında metinle uygun şekilde ortalanır. position: relative'u kullanarak daha büyük bir simge, diğerlerinin üzerine basar ve merkez dışı görünecektir.

+0

iyi noktalar, tüm simgelere göre pozisyon uygulayamazdım, sadece ince ayar yapmak istediklerinizi. senin jsfiddle içinde btw senin çizgi-yükseklik daha spesifik css tarafından basmış oluyor. – hajpoj

+0

evet, doğru - bu bölüm @hajpoj'dan bahsetmemi hatırladığın için teşekkürler. bootstrap içindeki simgelere uygulanan evrensel seçiciler, özgüllüğü veya kullanımı artırdığınız sürece her zaman geçersiz olacaktır! Önemli (Ben de önermem), bu yüzden satır yüksekliğinin kaynağa ayarlanması gerekir. Çizgi yüksekliği en etkilidir çünkü etrafındaki metinle ayarlanır. Ancak, hajpoj'un çözümünü, diğer tüm başarısızlıklarda kullanmamın üstesinden gelemiyorum. – jonschlinkert

İlgili konular