web-dev-qa-db-fra.com

Comment aligner verticalement le texte avec la police de caractères?

J'ai un HTML très basique qui mélange le texte brut et les polices d'icônes:

<div class="ui menu">
    <a href="t" class="item"><i class="large home basic icon"></i><span class="nav-text"> Accueil</span></a>
    <a href="" class="item"><i class="large camera retro icon"></i><span class="nav-text"> Créations</span></a>
    <a class="item"><span class="nav-text">Qui-suis je </span><i class="large help basic icon"></i></a>
</div>

Le problème est que les icônes ne sont pas restituées exactement à la même hauteur que le texte :

enter image description here

Une suggestion pour y remédier?

htmlcssfontsfont-awesome
41
Fractaliste

Vous pouvez ajouter vertical-align:middle aux éléments span:

EXEMPLE MIS À JOUR ICI

.nav-text {
    vertical-align:middle;
}
42
Josh Crozier

Il ya déjà quelques réponses ici mais j’ai trouvé que flexbox était la solution la plus propre et la moins "hacky": 

parent-element {
  display: flex;
  align-items: center;
}

Pour prendre en charge Safari <8, Firefox <21 et Internet Explorer <10 (Utilisez this polyfill pour prendre en charge IE8 + 9), vous aurez besoin des préfixes de fournisseur:

parent-element {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
22
sam

vertical-align peut prendre une valeur unitaire afin que vous puissiez y avoir recours en cas de besoin

{
  display:inline-block;
  vertical-align: 5px;
}

{
  display:inline-block;
  vertical-align: -5px;
}
18
getsetbro

Ajoutez ceci à votre CSS:

.menu i.large.icon,
.menu i.large.basic.icon {
    vertical-align:baseline;
}

D&EACUTE;MO

5
Arbel

Réglez line-height à la taille verticale de l'image, puis faites vertical-align:middle comme Josh l'a dit.

donc si l'image est 20px, vous auriez

{
line-height:20px;
font-size:14px;
vertical-align:middle;
}
2
Marian Udrea

pour centrer verticalement et horizontalement, utilisez ceci:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
2
Alberto Lozano

Ajout aux travées

vertical-align:baseline;

N'a pas fonctionné pour moi mais

vertical-align:baseline;
vertical-align:-webkit-baseline-middle;

a fonctionné (testé sur Chrome)

0
Tomer Almog

Vous pouvez utiliser cette propriété: vertical-align:middle;

.selector-class { 
    float:left;
    vertical-align:middle; 
}
0
kishan Radadiya