Comment faire pour centrer le texte verticalement avec une police de grande taille-génial icône?

Question

Disons que j'ai un bootstrap bouton avec un font-awesome icône et du texte:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

Comment puis-je rendre le texte centré verticalement? Le texte est aligné avec le bord inférieur de l'icône: http://jsfiddle.net/V7DLm/1/

EDIT: J'ai une possible solution: http://jsfiddle.net/CLdeG/1/ mais il se sent un peu hacky - introduit supplémentaire balise p, utilise pull-gauche et display:table. Peut-être que quelqu'un peut vous suggérer un moyen plus facile.

Answer 1

J'ai juste eu à le faire moi-même, vous devez le faire dans l'autre sens.

• ne pas jouer avec le vertical-align de votre texte
• jouer avec le vertical align de la font-awesome icône

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></i>
  <span class="my-text">hello world</span>
</div>

Bien sûr, vous ne pourriez pas utiliser des styles en ligne et de les cibler avec votre propre feuille de style css de la classe. Mais cela fonctionne dans un copier coller de la mode.

Voir ici: L'alignement Vertical du texte et l'icône dans le bootstrap bouton

Si ça ne tenait qu'à moi, cependant, je ne voudrais pas utiliser l'icône-2x. Et il suffit de spécifier une taille de police moi-même, comme dans l'exemple suivant

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>

.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

pour un exemple, voir http://jsfiddle.net/3GMjp/77/

Answer 2

Après avoir examiné toutes les options proposées, la solution la plus propre semble être le réglage de la hauteur de la ligne et vertical-align tout:

Voir Jsfiddle Démo

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

Answer 3

si les choses ne sont pas alignés, un simple line-height: inherit; via CSS sur certains je.fa éléments qui sont d'avoir des problèmes d'alignement pourrait faire l'affaire assez simplement.

Vous pouvez également procéder à l'utilisation d'une solution globale, qui, en raison d'un peu plus de CSS spécificité remplace FontAwesome .fa règle qui spécifie line-height: 1 sans nécessiter !important sur la propriété:

i.fa {
  line-height: inherit;
}

Assurez-vous juste que la solution globale ne cause pas d'autres problèmes dans des endroits où vous pourriez également utiliser FontAwesome icônes.

Answer 4

Je voudrais le texte à la ligne dans une sorte que vous pouvez cibler séparément. Maintenant, si vous flotter à la fois et à gauche, vous pouvez utiliser la hauteur de la ligne de contrôle de l'espacement vertical de la . Réglage à la même hauteur que le (30px) moyen de les aligner. Voir ici: http://jsfiddle.net/F3KyK/4/

Nouvelle Balise:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

Nouveau CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}