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

最近，我开始着手一个项目，其中包含一个带有一些字段的表，我想通过图标侧面的ECS添加一些材质设计图标。看看这张图片，你可能会明白

:

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

---

谢谢。

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

字体大小。示例：


#txt1{
字号：28px；
线高：24px；
}
#txt2{
字体大小：36px；
线高：24px；
}
#txt3{
字号：21px；
线高：24px；
}
.材质图标{
显示：内联flex；
垂直对齐：顶部；
}

伊迪努提纲


IDsettings_单元


IDstay_primary_scape
我有同样的问题时间最长，但找到了一个适合我的解决方案。首先，为要居中的图标指定一个自定义类。然后，添加一个底部垂直对齐和一个匹配或小于其旁边文本的字体大小。另外，不要在图标类名中指定图标大小。让我知道这是否适合你

CSS:

HTML:

“您的文字显示在此处”警告

简单：

您可以将另一个类（“右”）与之合并：



伊迪努提纲


IDsettings_单元


IDstay_primary_横向
您可以将图标边距顶部更改为任何正值或负值以对齐它。比如说,

<i class="material-icons" style="margin-top:-10px">info_outline</i>

info\u大纲
只需将
垂直对齐：
调整为负值即可

示例代码：

文件夹
您可以在HTML中执行以下操作：

<span>ID</span> <i class="material-icons">info</i>

将其放入.valign包装中，如下所示：

播放箭头2020年9月1日
停止2021年7月30日
运行代码段，您会看到图标没有正确对齐，它比文本更大，基线更高。我刚刚给出了代码段，用于右侧对齐，materialize中提供了内置类，而不是自定义它。检查这个url，在那里你可以看到登录按钮，右边对齐的图像没有任何其他额外的css编码。您必须使用正确的父标签。*在上一条评论中，您可以登录，只需查看一下菜单中的“ID”。以下内容对我来说很有效，因为垂直对齐：顶部并没有解决我的问题：。材质图标{显示：内联弹性；垂直对齐：文本底部；}令人惊讶的是，线条高度是我不知道如何找到自己的！这个解决方案对我有效。它似乎让材料完成工作（如预期的那样）。这应该是正确的答案。裁判：
<i class="material-icons" style="margin-top:-10px">info_outline</i>

<i class="material-icons" style="vertical-align: -6px;">folder</i>

<span>ID</span> <i class="material-icons">info</i>

.material-icons {
    display:inline-flex;
    vertical-align:top;
}