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?
PS. (Not a designer!)
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>
<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>
vertical-align
:middle applied to the icon
i` 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; } ai { 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>
a {
display: inline-flex;
align-items: center;
}
Will do the trick ;)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.