Wie kann ich Text vertikal an der Symbolschrift ausrichten?

71

Ich habe ein sehr einfaches HTML, das Klartext und Symbolschriftarten mischt. Das Problem ist, dass Symbole nicht genau auf derselben Höhe wie der Text gerendert werden:

<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>
Erweitern Sie das Snippet

Geben Sie hier die Bildbeschreibung ein

Irgendwelche Vorschläge, um das Problem zu beheben?

html css fonts font-awesome Fractaliste
quelle
URL-Inhalt funktioniert nicht jsfiddle.net/Fractaliste/caFk4/11
Rakesh Roy

Antworten:

87

In diesem Szenario können Sie, da Sie mit inlineElementen der Ebene arbeiten, vertical-align: middledie spanElemente für die vertikale Zentrierung hinzufügen :

.nav-text {
  vertical-align: middle;
}

Alternativ können Sie das Set displaydes Mutterelements flexund Satz align-itemsan centerfür vertikale Zentrierung :

.menu {
  display: flex;
  align-items: center;
}
Josh Crozier
quelle
1
Aus der Frage geht hervor, dass er die Symbole am Text ausrichten möchte, anstatt den Text an den Symbolen.
Arbel
3
@Arbel Ich bin mir nicht sicher - der Titel lautet: "Text an Symbolen ausrichten" . Es ist jedoch im Wesentlichen dasselbe.
Josh Crozier
@Arbel Gut, ich habe vergessen zu schreiben, wenn ich eine Grundlinie oder eine Ausrichtung in der Mitte benötigte, aber beide Vorschläge liefern ein viel saubereres Ergebnis als meine ursprüngliche Ansicht, sodass ich Ihre beiden Antworten als gut betrachte.
Fractaliste
51

Hier gibt es bereits einige Antworten, aber ich fand, 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 zu unterstützen (Verwenden Sie diese Polyfüllung , um 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;
}
Sam
quelle
Sehr einfacher und unkomplizierter Weg
Zulkarnain Shah
Ist die Idee, diese Regeln auf das aElement anzuwenden ? Wenn dies der Fall ist, ändern Sie displaydie Verknüpfung, sodass ein Inline-Element in ein Blockelement konvertiert wird. Ich stimme nicht zu, dass dies die beste Lösung ist.
Gorzas
@ Gorzas In diesem Fall, glaube ich, könnten Sie inline-flexanstelle von nurflex
Moon Cheesez
28

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;
}
getetbro
quelle
3
Ich habe alle oben genannten Vorschläge ausprobiert, aber nur Ihr Vorschlag hat gut funktioniert. danke
HungNM2
5

Fügen Sie dies Ihrem CSS hinzu:

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

DEMO

Arbel
quelle
4

Um vertikal und horizontal zu zentrieren, verwenden Sie Folgendes:

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

Stellen Sie line-heightdie vertikale Größe des Bildes ein und machen Sie es dann vertical-align:middlewie Josh.

Wenn das Bild ist 20px, hätten Sie

{
line-height:20px;
font-size:14px;
vertical-align:middle;
}
Marian Udrea
quelle
Soweit ich weiß, sollte ich Ihren CSS-Code auf die <a>Tags anwenden ?
Fractaliste
<span> ist ein Inline-Element. Möglicherweise möchten Sie ein Blockelement wie <div> verwenden, da <span> seltsam auf die Größe von CSS reagiert. Der Schlüssel hier ist, das Textelement auf die gleiche Größe wie Ihr Bild zu bringen, andernfalls wird die Mitte versetzt
Marian Udrea
sry misread, ja, Sie können es auch auf dem <a> -Tag tun, dasselbe gilt für, line-height = element height, dies wird alles perfekt ausrichten
Marian Udrea
1

Hinzufügen zu den Spannweiten

vertical-align:baseline;

Hat bei mir aber nicht funktioniert

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

hat funktioniert (auf Chrome getestet)

Tomer Almog
quelle
0

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

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

Verwenden von CSS Grid

HTML

<div class="container">
    <i class="fab fa-5x fa-file"></i>
    <span>text</span>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

Arbeitsbeispiel

Yooloobooy
quelle
0

Um die Antwort von Marian Udrea zu erweitern : In meinem Szenario habe ich versucht, den Text an einem Materialsymbol auszurichten. Materialsymbole haben etwas Seltsames, das verhindert hat, dass sie ausgerichtet werden. Keine der Antworten funktionierte, bis ich die hinzufügtevertical-align anstelle des übergeordneten Elements zum Symbolelement .

Wenn sich das Symbol 24pxin der Höhe befindet:

.parent {
    line-height: 24px; // Same as icon height

    i.material-icons {  // Only if you're using material icons
      display: inline-flex;
      vertical-align: top;
    }
}
Original BBQ Sauce
quelle