Jak wyrównać ikonę bootstrap z tekstem w przycisku?

Question

Jak wyrównać ikonę bootstrapu i obraz do dołu? (Używam font-awsome dla ikon).

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

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

Answer 1

Spróbuj tego: http://jsfiddle.net/jonschlinkert/CBss2/1/ to jak to wygląda po zastosowaniu line-height: 1;

bym nie bałagan z właściwością position jak sugeruje @hajpoj istnieje są czystsze sposoby rozwiązania problemu, który nie będzie miał później skutków kaskadowania. Innym problemem z używaniem position: relative jest to, że każda ikona ma nieco inny rozmiar. Chcesz spróbować utrzymać konserwację, biorąc to pod uwagę. Najlepiej uczynić go wyświetlanym jako tak, jakby był wyrównany do dołu dla większości normalnych rozmiarów ikon, a gdy używana jest ikona o większej niż przeciętna, jest wyśrodkowany prawidłowo z tekstem. Korzystanie z większej ikony spowoduje przesuwanie się nad innymi i wyglądać niecentralnie.

Answer 2

można wykorzystywać położenie względem.

i { 
    position: relative; 
    bottom: 1px; // or however much you want to offset it by 
} 

http://jsfiddle.net/hajpoj/ZdPGe/