11

Using material icons with CSS, I have the following code that renders a link with icon and text.

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

As you can see in the image below, the text seems to be sinking down.. I would like them to be vertically aligned center together. How can i achieve this?

Icon and Text mis-aliged

PS. (Not a designer!)

andreas
  • 16,357
  • 12
  • 72
  • 76
Vijay Chavda
  • 826
  • 2
  • 15
  • 34
  • 1
    try to use .material-icons, .icon-text { vertical-align: middle; } source:-https://github.com/google/material-design-icons/issues/121 – Razia sultana Oct 11 '16 at 14:44
  • 1
    Please add a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) of your code – Jamie Barker Oct 11 '16 at 14:45

4 Answers4

30

To vertically center elements, you can use the vertical-algin: middle; rule. In your case, that would most propably be:

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

Here is an example with your dark button:

.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>
andreas
  • 16,357
  • 12
  • 72
  • 76
1

vertical-align:middleapplied to the iconi` can be the simplest option but results can be inconsistent.

I have found better results with setting the link to display:inline-flex but the dfference is quite subtle.

vertical-align can still be used as a fallback for non-supporting browsers.

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
1

<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>
Sagar Pednekar
  • 334
  • 4
  • 14
-1
a {
  display: inline-flex;
  align-items: center;
}

Will do the trick ;)

eyettea
  • 1,376
  • 2
  • 16
  • 35