Centrum Twitter Bootstrap 3 Glify w przyciskach

Question

Używam teraz Twitter Bootstrap 3 RC2 oraz Twitter Bootstrap, który został przeniesiony do osobnego repozytorium. Zauważyłem, jeśli są stosowane w przycisk z tekstem ikona nie jest bardzo dobrze skoncentrowanej:

Ikona i tekst mają taką samą dolną linię, ale uważam za dobry przycisku poszukuje Ikona powinna być skoncentrowane na podstawie tekstu, czyż nie? Masz pomysł, jak to osiągnąć?

http://bootply.com/74652

Answer 1

przenieść tekst z <span> z glyphicon i zastosować vertical-align: middle; do <span>

<button class="btn btn-default"> 
    <span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered 
    </button> 

Demo

Działa to w Bootstrap 4 czcionką Niesamowite ikon jak tak

<button class="btn btn-default" style="vertical-align: middle;"> 
    <i class="fa fa-times"></i> Centered 
</button> 

Answer 2

Spróbuj vertical-align: middle; na .glyphicon-th:before

Answer 3

<button class="btn btn-default"> 
      <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span> 
      <span style="font-size: 17px;">Not Centered</span> 
    </button> 

należy zwiększyć lub zmniejszyć rozmiar czcionki w zależności od zapotrzebowania

Answer 4

Nałożyć vertical-align: -{N}px; styl na .glyphicon-tego, aby go przesunąć N pikseli w górę/w dół.

Answer 5

Inny sposób

<button class="btn default" id="IdBack"> 
    <i class="glyphicon glyphicon-hand-left"></i> 
    <b>Back</b> 
</button> 

Answer 6

Żaden z powyższych sposobów pracował dobrze dla mnie za sobą, ale przy użyciu display: inline-block; vertical-align: middle na elementach zrobił. To inline-block wydaje się być kluczowe.

.vcenter * { 
    vertical-align: middle; 
    display: inline-block; 
} 

.btn i { 
    margin-left: 10px; 
    font-size: 20px; 
} 

z

<div class="vcenter"> 
    <button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button> 
    <button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button> 
    <button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button> 
</div> 

Zobacz http://www.bootply.com/UbY78zM8pD na żywo np.

Answer 7

udało mi się zrobić to tak:

.glyphicon.center:before { 
    vertical-align: middle; 
} 

i używać <span class="glyphicon center glyphicon-th"></span>.

Answer 8

Dodaj marginesy określonych pikseli lub procentów. W mojej aplikacji działało to pięknie, w oparciu o wymiary obszaru.

CSS:

.someWrapperClass button span { 
    margin-top: 120%; 
} 

HTML:

<div class="someWrapperClass"> 
    <button type="button" ng-click="SomeMethod()"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
    </button> 
</div> 

Answer 9

jakiegoś vertical-align może nie działać z powodu pozycjonowania: Jeśli spojrzeć na klasy .glyphicon będziesz go zobaczyć jest ustawiony na względny, spróbuj ustawić go na "dziedziczenie" e.g:

.glyphicon.v-centered { 
    position: inherit; 
    vertical-align: middle; 
} 

Powinno to również działać w przypadku ikon niezawierających przycisków, np. zakładki.

Answer 10

Problem: Ikona Glypha była o 2 px za wysoka nad tekstem przycisku. Naprawiono to w następujący sposób, korzystając z przykładów tutaj. Dziękuję (Alastair Maw).

udało mi się kopalnia działa następująco:

HTML

<div class="col-xs-12"> 
    <a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard"> 
     <span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information 
    </a> 
</div> 

CSS

#panelTopic .glyph_Credit { 
    vertical-align: middle; 
    display: inline-block; 
    padding-bottom:6px; 
}