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

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;"></span>
  <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 de 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 JsFiddle

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

un flexbox option - police génial 4.7 et ci-dessous

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

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

HTML:

<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/

---

à l'aide de flex et de la police impressionnant 5

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

CSS:

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

HTML:

<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/

Cela a bien fonctionné pour moi.

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

Une autre option pour régler la hauteur de la ligne d'une icône à l'aide d'un pourcentage de la vertical-align de la propriété. Généralement, 0% est un bas, et 100% au top, mais on peut utiliser des valeurs négatives ou plus d'une centaine de créer des effets intéressants.

.my-element i.fa {
    vertical-align: 100%; //top
    vertical-align: 50%; //middle
    vertical-align: 0%; //bottom
}

Lors de l'utilisation d'un flexbox, l'alignement vertical de la police impressionnant icônes à côté de texte peut être très difficile. J'ai essayé les marges et padding, mais qui se sont déplacés tous les éléments. J'ai essayé différentes flex alignements comme centre, de démarrage, de base, etc, en vain. La méthode la plus simple et la plus propre façon de régler uniquement l'icône était de la div contenant de position: relative; top: XX; Ce fait le travail parfaitement.

Bien, cette question a été posée ans. Je pense que la technologie a un peu changé et la compatibilité du navigateur est beaucoup mieux. Vous pouvez utiliser vertical-align, mais je pense que certains ce moins évolutive et moins réutilisable. Je vous recommande un flexbox approche.

Ici est l'exemple même de l'affiche originale utilisés, mais avec flexbox. Il les styles d'un élément unique. Si un bouton de changements de taille pour quelque raison que ce soit, il va continuer à être à la verticale et centrée horizontalement.

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

Exemple: JsFiddle