web-dev-qa-db-fra.com

CSS - Centrer le texte avec l'icône

En utilisant des icônes matérielles avec CSS, j'ai le code suivant qui rend un lien avec une icône et du texte.

<a href="#"><i class="material-icons">group_work</i>Groups</a>

Comme vous pouvez le voir dans l’image ci-dessous, le texte semble s’effondrer. Je voudrais qu’ils soient alignés verticalement au centre. Comment puis-je atteindre cet objectif?

 Icon and Text mis-aliged

PS (Pas un designer!)

htmlcssiconsvertical-alignmentgoogle-material-icons
5
Vijay Chavda

Pour centrer les éléments verticalement, vous pouvez utiliser la règle vertical-algin: middle; . Dans votre cas, ce serait très probablement:

.material-icons {
  vertical-align: middle;
}

Voici un exemple avec votre bouton noir:

.material-icons {
  vertical-align: middle;
  margin-right: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<a href="#" class="grey darken-3 btn"><i class="material-icons">group_work</i>Groups</a>

9
andreas

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<a href="#" class="grey darken-4 btn"><i class="material-icons left">group_work</i>Groups</a>

2
Sagar Pednekar

vertical-align: middleapplied to the iconi` peut être l'option la plus simple mais les résultats peuvent être incohérents.

J'ai trouvé de meilleurs résultats en réglant le lien sur display:inline-flex mais la différence est assez subtile.

vertical-align peut toujours être utilisé comme solution de secours pour les navigateurs non compatibles.

a {
  margin: 1em;
  display: inline-block;
}
a i {
  vertical-align: middle;
}
a.flex {
  display: inline-flex;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<a href="#" class=""><i class="material-icons">group_work</i>Groups</a>
<br/>
<a href="#" class="flex"><i class="material-icons">group_work</i>Groups</a>

1
Paulie_D
a {
  display: inline-flex;
  align-items: center;
}

Fera le tour;)

0
eyettea