webentwicklung-frage-antwort-db.com.de

Center Twitter Bootstrap 3 Glyphicons in Buttons

Ich verwende jetzt Twitter Bootstrap 3 RC2 sowie Twitter Bootstrap, das in ein separates Repository verschoben wurde. Ich habe bemerkt, wenn es in einer Schaltfläche mit Text verwendet wird Das Symbol ist nicht sehr gut zentriert:

enter image description here

Das Symbol und der Text haben dieselbe Endzeile, aber ich glaube, für eine gut aussehende Schaltfläche sollte das Symbol basierend auf dem Text zentriert sein, oder? Irgendeine Idee, wie man das erreicht?

http://bootply.com/74652

44
Mahoni

Verschieben Sie den Text mit dem Glyphicon aus dem <span> Und wenden Sie vertical-align: middle; Auf das <span> An.

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

Demo

Dies funktioniert in Bootstrap 4 mit Font Awesome-Symbolen wie folgt

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

Wenden Sie einen vertical-align: -{N}px; - Stil auf das Glyphikon an, um es um N Pixel nach oben/unten zu verschieben.

27
kumarharsh

Einige vertikale Ausrichtungen funktionieren möglicherweise aufgrund der Positionierung nicht: Wenn Sie in die Glyphicon-Klasse schauen, werden Sie feststellen, dass sie auf "relativ" gesetzt ist, versuchen Sie, sie auf "erben" zu setzen, z.

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

Dies sollte auch für Symbole funktionieren, die nicht in Schaltflächen enthalten sind, z. Tabs.

3
Vilius

Problem: Das Glyphensymbol war 2 px zu hoch über dem Schaltflächentext. Behebung wie folgt anhand von Beispielen. Vielen Dank (Alastair Maw).

Ich habe es geschafft, meine Arbeit wie folgt zu bekommen:

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;
}
1
Valkerie Silk

Versuchen vertical-align: middle; auf .glyphicon-th:before

1
Mihai Alex

Ich habe es so geschafft:

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

und benutze <span class="glyphicon center glyphicon-th"></span>.

1

Keine der oben genannten Methoden hat für sich alleine gut funktioniert, aber mit display: inline-block; vertical-align: middle auf die Elemente hat. Es ist das inline-block das scheint der Schlüssel zu sein.

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

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

mit

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

Siehe http://www.bootply.com/UbY78zM8pD für ein Live-Beispiel.

1
Alastair Maw

Andere Weise

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

Fügen Sie einen Rand der spezifischen Pixel oder Prozentsätze hinzu. In meiner App hat dies wunderbar funktioniert, basierend auf den Dimensionen des Bereichs.

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>
0
Will Strohl
<button class="btn btn-default">
          <span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
          <span style="font-size: 17px;">Not Centered</span>
    </button>

bitte vergrößern oder verkleinern Sie die Schriftgröße entsprechend Ihrer Anforderung

0
rajeshpanwar