Comment centrer le texte verticalement avec une grande icône de police-impressionnant?

disons que j'ai un bouton bootstrap avec une icône font-awesome et un peu de texte:

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

Comment faire apparaître le texte verticalement centré? Le texte est aligné avec le bord inférieur de l'icône maintenant: http://jsfiddle.net/V7DLm/1 /

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

187
demandé sur Paul 2013-06-26 04:55:28

12 réponses

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 l'alignement vertical de l'icône font-awesome
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

bien sûr, vous ne pouviez pas utiliser les styles inline et le cibler avec votre propre classe css. Mais cela fonctionne à la mode copie-pâte.

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

si cela ne tenait qu'à moi, je n'utiliserais pas l'icône-2x. Et spécifiez simplement la taille de police moi-même, comme dans le 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 pratique, voir http://jsfiddle.net/3GMjp/77 /

247
répondu andxyz 2017-05-23 11:33:24

j'utilise des icônes à côté du texte 99% du temps donc j'ai fait le changement globalement:

.fa-2x {
  vertical-align: middle;
}

ajouter 3x, 4x, etc. à la même définition que nécessaire.

41
répondu Rush Frisby 2015-04-01 13:53:23

après avoir considéré toutes les options suggérées, la solution la plus propre semble être de définir la ligne-hauteur et la verticale-aligner 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;
}
33
répondu Paul 2013-09-03 01:32:16

si les choses ne sont pas alignées, un simple line-height: inherit; via CSS sur specific I. les éléments de la Loi sur l'équité en matière d'emploi qui ont des problèmes d'harmonisation pourraient faire l'affaire assez simplement.

vous pouvez également utiliser une solution globale, qui en raison d'une spécificité CSS légèrement plus élevée supplantera FontAwesome .règle de fa qui spécifie line-height: 1 sans exiger !important sur le bien:

i.fa {
  line-height: inherit;
}

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

21
répondu purefusion 2014-03-17 14:34:36

un flexbox option

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

violon

http://jsfiddle.net/Hastig/V7DLm/180 /

10
répondu Hastig Zusammenstellen 2016-09-06 12:00:59

la façon la plus simple est de définir la propriété CSS vertical-align au milieu

i.fa {
    vertical-align: middle;
}
9
répondu ajaali 2017-10-08 19:52:12

Cela a bien fonctionné pour moi.

i.fa {
  line-height: 100%;
}
5
répondu Tom 2016-11-03 06:44:14

une autre option pour affiner la hauteur de ligne d'une icône est en utilisant un pourcentage de la propriété vertical-align . Habituellement, 0% est un le bas, et 100% au sommet, mais on pourrait utiliser des valeurs négatives ou plus d'une centaine pour créer des effets intéressants.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}
1
répondu Arian Acosta 2017-08-09 22:22:27

essayez de définir votre icône comme height: 100%

vous n'avez pas besoin de faire quoi que ce soit avec l'emballage (par exemple, votre bouton).

Cela nécessite de Police Impressionnant 5. Je ne suis pas sûr que cela fonctionne pour les versions FA plus anciennes.

.wrap svg {
    height: 100%;
}

notez que l'icône est en fait un graphique svg .

Démo

1
répondu mriiiron 2018-01-26 04:27:54

j'envelopperais le texte dans un pour que vous puissiez le cibler séparément. Maintenant si vous flottez les deux et à gauche, vous pouvez utiliser la ligne-hauteur pour contrôler l'espacement vertical de la . Le placer à la même hauteur que le (30px) l'alignera au milieu. 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>

New CSS:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}
0
répondu Webster Gordon 2013-06-26 01:08:51

lors de l'utilisation d'une flexbox, l'alignement vertical des icônes police awesome à côté du texte peut être très difficile. J'ai essayé les marges et le rembourrage, mais ça a déplacé tous les articles. J'ai essayé différents alignements flex comme center, start, baseline, etc, en vain. La façon la plus facile et propre pour ajuster seulement l'icône était de mettre il est contenant div à position: relative; top: XX; cela a fait le travail parfaitement.

0
répondu ADP 2017-12-27 19:32:16

les polices ont la solution en standard, Je l'utilise quand je dois centrer une icône dans une chaîne de caractères: https://fontawesome.com/how-to-use/svg-with-js

0
répondu support crud 2018-03-08 09:18:39