将材质图标与 Materialize 上的文本对齐

Question

最近，我开始从事一个项目，该项目包含一个包含一些字段的表格，我想在图标的一侧通过 MaterializeCSS 添加一些材料设计图标。看看图片，你可能会明白

：

我尝试了所有方法，垂直对齐、内联（-block）、flex 以及我在堆栈溢出中可以找到的所有方法。所以不，这不是重复的，我真的需要帮助。谢谢你。

原文由 MucaP 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一种方法。当然这取决于图标，您必须找到适合图标高度的特定 font-size 。例子：

 #txt1{
 font-size:28px;
 line-height:24px;
}
#txt2{
 font-size:36px;
 line-height:24px;
}
#txt3{
 font-size:21px;
 line-height:24px;
}
.material-icons{
    display: inline-flex;
    vertical-align: top;
}

 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<span id="txt1">ID</span><i class="material-icons">info_outline</i>
</br>
<span id="txt2">ID</span><i class="material-icons">settings_cell</i>
</br>
<span id="txt3">ID</span><i class="material-icons">stay_primary_landscape</i>

原文由 Theodore K. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这个css对我有用。它基本上是重置字体大小和行高，然后将其对齐到基线的底部..

 .material-icons {
  font-size: inherit;
  line-height: inherit;
  vertical-align: bottom;
}

原文由 Muhammad Syauqy 发布，翻译遵循 CC BY-SA 4.0 许可协议