web-dev-qa-db-fra.com

Alignement vertical du texte et de l'icône dans le bouton

Je ne parviens pas à aligner verticalement une icône représentant une police géniale avec du texte dans un bouton du cadre Bootstrap). J'ai essayé beaucoup de choses, y compris la définition de la hauteur de ligne, mais rien ne fonctionne.

<button id="edit-listing-form-house_Continue" 
        class="btn btn-large btn-primary"
        style=""
        value=""
        name="Continue"
        type="submit">
    Continue
    <i class="icon-ok" style="font-size:40px;"></i>
</button>

http://jsfiddle.net/fPXFY/

Comment puis-je le faire fonctionner?

twitter-bootstrapalignmentwebfontsfont-awesome
54
Shane

Il y a une règle qui est définie par font-awesome.css, que vous devez remplacer.

Vous devez définir des remplacements dans vos fichiers CSS plutôt qu'en ligne, mais essentiellement, la classe icon-ok est définie sur vertical-align: baseline; par défaut et que j’ai corrigé ici:

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

Exemple ici: http://jsfiddle.net/fPXFY/4/ et dont le résultat est:

enter image description here

J'ai réduit la taille de la police de l'icône ci-dessus dans cet exemple à 30px, comme il est trop gros à 40px pour la taille du bouton, mais il s’agit d’un point de vue personnel. Vous pouvez augmenter le rembourrage sur le bouton pour compenser si nécessaire:

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">
    <span>Continue</span>
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i>
</button>

Production: http://jsfiddle.net/fPXFY/5/ dont le résultat est:

enter image description here

90
nickhar

Alternativement si vous utilisez bootstrap alors vous pouvez simplement ajouter align-middle pour aligner l'élément verticalement.

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit">Continue
    <i class="icon-ok align-middle" style="font-size:40px;"></i>
</button>
5
Ali Kazai