web-dev-qa-db-fra.com

Comment centrer le texte verticalement avec une grande icône représentant une police géniale?

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

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

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

EDIT: J'ai un possible solution: http://jsfiddle.net/CLdeG/1/ mais ça semble un peu féroce - introduit une balise p gauche et afficher: table. Peut-être que quelqu'un peut suggérer un moyen plus simple.

htmlcsshtml5css3font-awesome
202
Paul

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

Voir Jsfiddle Demo

CSS:

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

#ico {
    vertical-align: middle;
}
34
Paul

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

  • not not ne joue pas avec l'alignement vertical de votre texte
  • jouez 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 pouvez pas utiliser de styles inline et le cibler avec votre propre classe css. Mais cela fonctionne comme un copier-coller.

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

Si cela dépendait de moi cependant, je n'utiliserais pas l'icône-2x. Et spécifiez simplement la taille de la police moi-même, comme dans la suite

<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, s'il vous plaît voir http://jsfiddle.net/3GMjp/77/

260
andxyz

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

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

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

44
Rush Frisby

si tout ne se passe pas comme prévu, un simple line-height: inherit; via CSS sur des éléments i.fa spécifiques rencontrant des problèmes d'alignement pourrait suffire à faire l'affaire. 

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: 1 sans exiger !important sur la propriété:

i.fa {
  line-height: inherit;
}

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

21
purefusion

une option flexbox - font awesome 4.7 et moins

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/

en utilisant flex et font awesome 5

FA Hosted URL - 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/

11
Hastig Zusammenstellen

La méthode la plus simple consiste à définir la propriété css vertical-align sur middle

i.fa {
    vertical-align: middle;
}
11
ajaali

Cela a bien fonctionné pour moi.

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

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. Vous ne savez pas si cela fonctionne pour les anciennes versions de FA.

.wrap svg {
    height: 100%;
}

Notez que l'icône est en réalité un graphique svg.

Démo

2
mriiiron

Une autre option pour ajuster la hauteur de ligne d'une icône consiste à utiliser un pourcentage de la propriété vertical-align. Habituellement, 0% est le bas et 100%, mais vous pouvez utiliser des valeurs négatives ou plus de cent pour créer des effets intéressants.

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

Je voudrais envelopper le texte dans un afin que vous puissiez le cibler séparément. Maintenant, si vous flottez à gauche et à droite, vous pouvez utiliser line-height pour contrôler l’espacement vertical des colonnes. Le régler à la même hauteur que le (30px) l’alignera au milieu. Voir ici: http://jsfiddle.net/F3KyK/4/

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;
}
0
Webster Gordon

Pour ceux qui utilisent Bootstrap 4, rien de plus simple:

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

Lorsque vous utilisez une boîte souple, l’alignement vertical des superbes icônes 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 flex comme centre, début, ligne de base, etc., en vain. Le moyen le plus simple et le plus propre de n’ajuster que l’icône était de définir le paramètre div contenant div à position: relative; top: XX;.

0
ADP