CSS - 将文本与图标居中对齐

新手上路,请多包涵

使用带有 CSS 的材料图标,我有以下代码呈现带有图标和文本的链接。

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

正如您在下图中看到的,文字似乎在下沉。我希望它们垂直居中对齐。我怎样才能做到这一点?

图标和文字错位

附言。 (不是设计师!)

原文由 Vijay Chavda 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 622
2 个回答

要垂直居中元素,您可以使用 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>

原文由 andreas 发布,翻译遵循 CC BY-SA 3.0 许可协议

<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 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题