web-dev-qa-db-fra.com

Centre Twitter Bootstrap 3 glyphicons dans les boutons

J'utilise maintenant Twitter Bootstrap 3 RC2 ainsi que Twitter Bootstrap qui a été transféré dans un référentiel distinct. J'ai remarqué qu'il était utilisé dans un bouton avec du texte l'icône n'est pas très bien centrée:

enter image description here

L'icône et le texte ont la même ligne de fond, mais je crois que pour un bon bouton, l'icône doit être centrée sur le texte, n'est-ce pas? Une idée comment y parvenir?

http://bootply.com/74652

csstwitter-bootstrapglyphicons
44
Mahoni

Déplacez le texte hors du <span> avec le glyphicon et appliquez vertical-align: middle; au <span>

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

Démo

Cela fonctionne dans Bootstrap 4 avec les icônes Font Awesome comme

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

Appliquer un vertical-align: -{N}px; style sur le .glyphicon-th pour le décaler de N pixels vers le haut/bas.

27
kumarharsh

Pour certains alignement vertical pourrait ne pas fonctionner à cause du positionnement: Si vous regardez dans la classe .glyphicon, vous verrez qu’elle est définie sur relative, essayez de la définir pour 'inherit', par exemple:

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

Cela devrait également fonctionner pour les icônes qui ne sont pas dans les boutons, par exemple. onglets.

3
Vilius

Problème: l’icône du glyphe était 2 px trop haut au-dessus du texte du bouton. Corrigé comme suit en utilisant des exemples ici. Merci (Alastair Maw).

J'ai réussi à faire fonctionner le mien comme suit:

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

Essayez vertical-align: middle; sur .glyphicon-th:before

1
Mihai Alex

J'ai réussi à le faire comme ça:

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

et utilise <span class="glyphicon center glyphicon-th"></span>.

1
Timo Türschmann

Aucune des méthodes ci-dessus ne fonctionnait bien pour moi seule, mais en utilisant display: inline-block; vertical-align: middle sur les éléments ont. C'est le inline-block cela semble être la clé.

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

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

avec

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

Voir http://www.bootply.com/UbY78zM8pD pour un exemple en direct.

1
Alastair Maw

Autre façon

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

Ajouter une marge des pixels spécifiques ou un pourcentage. Dans mon application, cela fonctionnait à merveille, en fonction des dimensions de la zone.

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>

augmentez ou diminuez la taille de la police selon vos besoins

0
rajeshpanwar