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


231

Disons que j'ai un bouton d'amorçage avec une icône de police impressionnante et du texte:

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

Comment faire pour que le texte apparaisse centré verticalement? Le texte est désormais aligné sur le bord inférieur de l'icône: http://jsfiddle.net/V7DLm/1/

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


2
Tu es un dieu. Sérieusement, j'ai passé 2 heures sur ce sujet aujourd'hui, votre solution était de loin la plus propre. Pas besoin de coder en dur quoi que ce soit.
Chuck

cette approche est la plus facile
Raveen Beemsingh

Réponses:


304

Je devais juste le faire moi-même, vous devez le faire dans l'autre sens.

  • ne jouez pas avec l'alignement vertical de votre texte
  • jouer avec l'alignement vertical de l'icône de police
<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 pouvez pas utiliser de styles en ligne et le cibler avec votre propre classe CSS. Mais cela fonctionne à la manière d'un copier-coller.

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

Si cela ne tenait qu'à moi, je n'utiliserais pas l'icône-2x. Et spécifiez simplement la taille de la police moi-même, comme ci-dessous

<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 de travail, veuillez consulter JsFiddle


1
oui, c'est une meilleure solution, merci. Semble toujours exiger une hauteur de ligne bien que jsfiddle.net/paulftw/F3KyK/41
Paul

1
J'ai mis à jour votre jsfiddle pour savoir comment je le ferais. J'ai utilisé la taille de police pour l'icône au lieu d'utiliser le 2x. jsfiddle.net/3GMjp/1
andxyz

Dans votre premier morceau de code, la balise <span> de début ne correspond pas à la balise de fin </i>.
jzacharuk

Ne fonctionne pas avec certaines icônes. exemple fa-angle-left
steakchaser

Il est important de réaliser que l'inclusion des fichiers js fontawesome peut également modifier l'apparence. Mon icône était trop loin en haut, j'ai supprimé l'inclusion js pour voir ce qui se passerait et maintenant c'est trop loin en bas -.-
lucidbrot

53

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

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

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


7
À mon avis, cela devrait être la réponse acceptée, car c'est de loin la solution la plus simple, sauf si je manque quelque chose dans la question initiale. Merci @rushonerok! Je ne sais pas pourquoi certaines personnes disent de ne pas utiliser vertical-align: middle;- je manque peut-être quelque chose ici. Veuillez expliquer si oui.
Kendall

1
@Kendall Roth Je pense que lorsque les gens disent de ne pas utiliser vertical-align: middle, cela signifie que vous utilisez des blockéléments . Si vous utilisez inline, inline-blockou table-cell, vous devriez être bon. MDN:vertical-align
rinogo

Fonctionne comme un charme! Merci: D
Mohammed A. Fadil

37

Après avoir examiné toutes les options suggérées, la solution la plus propre semble être de régler la hauteur de ligne et d'aligner verticalement tout:

Voir la démo Jsfiddle

CSS:

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

#ico {
    vertical-align: middle;
}

2
Et si votre conteneur est plus grand que 50px? Ensuite, cela ne fonctionnera pas ... J'ai du contenu qui change de taille et il devrait y avoir une icône centrée à l'intérieur ... une idée à ce sujet?
Slaven Tomac

24

si les choses ne s'alignent pas, un simple line-height: inherit;via CSS sur des éléments i.fa spécifiques qui ont des problèmes d'alignement pourrait faire l'affaire assez simplement.

Vous pouvez également utiliser une solution globale qui, en raison d'une spécificité CSS légèrement supérieure, remplacera la règle .fa de FontAwesome qui spécifie line-height: 1sans exiger !importantde la propriété:

i.fa {
  line-height: inherit;
}

Assurez-vous simplement que la solution globale ci-dessus ne cause aucun autre problème aux endroits où vous pouvez également utiliser les icônes FontAwesome.


16

une option flexbox - police impressionnante 4.7 et inférieure

URL hébergée FA 4.x - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

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="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

violon

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


utiliser flex et police génial 5

URL hébergée FA 5.x - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

violon

https://jsfiddle.net/3bpjvof2/


1
Cela peut centrer une icône verticalement dans une div, pas seulement dans une ligne de texte. Fonctionne très bien!
Sean the Bean

@ quiconque continue d'essayer de le modifier - c'est généralement mon style de mise en page pour les réponses. Je crois que cela le rend plus lisible / compréhensible et permet aux gens de mieux savoir où ils vont avant de cliquer sur le lien. Dans le cas de l'URL hébergée FA, certaines personnes ont l'habitude de mettre en évidence un lien pour le copier, c'est pourquoi il est écrit en entier. Les liens jsfiddle ont un en-tête pour mieux décomposer la page, sinon c'est plus facile à manquer et les réponses peuvent sembler encombrées.
Hastig Zusammenstellen

11

Le moyen le plus simple consiste à définir la propriété css d'alignement vertical sur middle

i.fa {
    vertical-align: middle;
}

3
.svg-inline--fapour FontAwesome 5
darylknight

@darylknight, qu'est-ce que cela signifie? Comment pourrais-je activer / utiliser cela? Ajouter quelque chose après mon fa-clockcours?
Prof.Falken

5

Cela a bien fonctionné pour moi.

i.fa {
  line-height: 100%;
}

3

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

Vous n'avez rien à faire avec le wrapper (par exemple, votre bouton).

Cela nécessite Font Awesome 5. Je ne sais pas si cela fonctionne pour les anciennes versions de FA.

.wrap svg {
    height: 100%;
}

Notez que l'icône est en fait un svggraphique.

Démo


2

Pour ceux qui utilisent Bootstrap 4, c'est simple:

<span class="align-middle"><i class="fas fa-camera"></i></span>

Cela n'a aucune utilité comme vertical-align: middle qui est appliqué par cette classe cible uniquement les tables.
Lucas Manzke

1

Une autre option pour affiner la hauteur de ligne d'une icône consiste à utiliser un pourcentage de la vertical-alignpropriété. Habituellement, 0% est 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

Je voudrais envelopper le texte dans un afin que vous puissiez le cibler séparément. Maintenant, si vous flottez à gauche et à gauche, vous pouvez utiliser la hauteur de ligne pour contrôler l'espacement vertical du. Le régler à la même hauteur que le (30px) l'alignera au milieu. Voyez ici .

Nouveau balisage:

 <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;
}

4
L'alignement vertical ne fait rien sur les éléments de bloc, il ne fonctionne que sur les éléments en ligne ou de cellule de tableau.
cimmanon

Je vois, définir line-height = hauteur du conteneur et les choses flottantes restantes fonctionnent et nécessitent moins de frappe. Voici un violon mis à jour avec un bruit réduit: jsfiddle.net/F3KyK/7
Paul

Il est préférable de simplement définir vertical-align: middlel'icône et le texte. De cette façon, vous ne faites pas d'hypothèses sur la hauteur de l'icône et il y a moins de CSS.
Maros

0

Lorsque vous utilisez une boîte flexible, l'alignement vertical d'icônes impressionnantes de police à côté du texte peut être très difficile. J'ai essayé les marges et le rembourrage, mais cela a déplacé tous les éléments. J'ai essayé différents alignements flexibles comme le centre, le début, la ligne de base, etc., en vain. Le moyen le plus simple et le plus propre d'ajuster uniquement l'icône était de définir qu'il contient div. position: relative; top: XX;Cela a parfaitement fonctionné.


0

Eh bien, cette question a été posée il y a des années. Je pense que la technologie a beaucoup changé et que la compatibilité du navigateur est bien meilleure. Vous pouvez utiliser l'alignement vertical mais je considérerais que certains sont moins évolutifs et moins réutilisables. Je recommanderais une approche flexbox .

Voici le même exemple que l'affiche originale utilisée mais avec flexbox. Il stylise un seul élément. Si la taille d'un bouton change pour une raison quelconque, il continuera à être centré verticalement et horizontalement.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Exemple: JsFiddle


0

Définissez simplement la vertical-alignpropriété de l'élément icône:

div .icon {
   vertical-align: middle;
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.