it-swarm.com.de

CSS - Zentrieren Sie den Text mit dem Symbol aus

Unter Verwendung von Material-Icons mit CSS habe ich den folgenden Code, der einen Link mit Symbol und Text darstellt.

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

Wie Sie im Bild unten sehen können, scheint der Text nach unten zu sinken. Ich möchte, dass sie in der Mitte vertikal ausgerichtet sind. Wie kann ich das erreichen?

 Icon and Text mis-aliged

PS. (Kein Designer!)

5
Vijay Chavda

Um Elemente vertikal zu zentrieren, können Sie die vertical-algin: middle; -regel verwenden. In Ihrem Fall wäre das am wahrscheinlichsten:

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

Hier ist ein Beispiel mit Ihrem dunklen Knopf:

.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` kann die einfachste Option sein, die Ergebnisse können jedoch inkonsistent sein.

Ich habe bessere Ergebnisse gefunden, wenn Sie den Link auf display:inline-flex setzen, aber die Dfference ist ziemlich subtil.

vertical-align kann weiterhin als Fallback für nicht unterstützende Browser verwendet werden.

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

Werde den Trick machen;)

0
eyettea