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

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.

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

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.

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

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.

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/

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

i.fa {
    vertical-align: middle;
}

Cela a bien fonctionné pour moi.

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

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

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

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

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
}

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

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é.

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

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

div .icon {
   vertical-align: middle;
}