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.
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 /
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.
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;
}
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.
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
la façon la plus simple est de définir la propriété CSS vertical-align au milieu
i.fa {
vertical-align: middle;
}
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
}
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
.
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;
}
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.
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