L'alignement Vertical du texte et l'icône de bouton
J'ai de la difficulté à la verticale de l'alignement de la police génial icône avec le texte dans un bouton sous le Bootstrap cadre. J'ai essayé beaucoup de choses, y compris le réglage de la hauteur de la 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>
Comment puis-je obtenir que cela fonctionne?
Vous devez vous connecter pour publier un commentaire.
Il y a une règle, qui est définie par
font-awesome.css
, dont vous avez besoin pour remplacer.Vous devez configurer les remplacements de vos fichiers CSS plutôt que dans la ligne, mais pour l'essentiel, l'icône-ok de la classe est en cours de mise à
vertical-align: baseline;
par défaut et j'ai corrigé ici:Exemple ici: http://jsfiddle.net/fPXFY/4/ et dont la sortie est:
J'ai réduit la taille de la police-taille de l'icône ci-dessus dans la présente instance à
30px
, car il se sent trop grand au40px
pour la taille du bouton, mais c'est purement d'un point de vue personnel. Vous pouvez augmenter le rembourrage sur le bouton pour compenser si nécessaire:Production: http://jsfiddle.net/fPXFY/5/ dont la sortie est:
margin-top: -0.125em
, comme je ai trouvé qu'il y a encore un peu d'espace en haut si vous utilisez une icône "barres" (omniprésent mobile bouton nav).Alternativly si votre utilisation de bootstrap, alors vous pouvez simplement ajouter
align-middle
à la verticale aligner l'élément.