it-swarm.com.de

Wie wird Text vertikal mit der Symbolschriftart ausgerichtet?

Ich habe einen sehr einfachen HTML-Code, der Text und Symbolschriftarten kombiniert:

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

Das Problem ist, dass Icons nicht exakt auf derselben Höhe wie der Text dargestellt werden.

enter image description here

Irgendwelche Vorschläge, um das Problem zu beheben?

41
Fractaliste

Sie können den span-Elementen vertical-align:middle hinzufügen:

AKTUALISIERTES BEISPIEL HIER

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

Es gibt bereits ein paar Antworten, aber ich habe festgestellt, dass Flexbox die sauberste und am wenigsten "hackige" Lösung ist: 

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

Um Safari <8, Firefox <21 und Internet Explorer <10 (Verwenden Sie this polyfill zur Unterstützung von IE8 + 9) zu unterstützen, benötigen Sie Herstellerpräfixe:

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 kann einen Einheitswert annehmen, sodass Sie bei Bedarf darauf zurückgreifen können:

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

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

Fügen Sie dies Ihrem CSS hinzu:

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

DEMO

5
Arbel

Setzen Sie line-height auf die vertikale Größe des Bildes und dann vertical-align:middle, wie es von Josh gesagt wurde.

wenn das Bild also 20px ist, müssten Sie dies tun

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

vertikal und horizontal zentrieren

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

Hinzufügen zu den Bereichen

vertical-align:baseline;

Hat aber nicht für mich gearbeitet

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

funktionierte (getestet auf Chrome)

0
Tomer Almog

Sie können diese Eigenschaft verwenden: vertical-align:middle;

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