使用带有CSS的素材图标,我有以下代码,用于呈现带有图标和文本的链接。
<a href="#"><i class="material-icons">group_work</i>Groups</a>
正如你在下面的图片中看到的那样,文字似乎正在下沉..我希望它们垂直对齐在一起。我怎样才能做到这一点?
PS。 (不是设计师!)
答案 0 :(得分:11)
要垂直居中元素,您可以使用vertical-algin: middle;
规则。在你的情况下,最合适的是:
.material-icons {
vertical-align: middle;
}
以下是暗按钮的示例:
.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>
答案 1 :(得分:2)
<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>
&#13;
答案 2 :(得分:1)
vertical-align
:mid applied to the icon
i`可能是最简单的选项,但结果可能不一致。
通过设置display:inline-flex
的链接,我找到了更好的结果,但差异非常微妙。
vertical-align
仍可用作非支持浏览器的后备广告。
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>
答案 3 :(得分:0)
a {
display: inline-flex;
align-items: center;
}
可以解决问题;)