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

【问题标题】：Align material icon with text on Materialize将材质图标与 Materialize 上的文本对齐
【发布时间】：2017-02-15 20:34:07
【问题描述】：

最近，我开始从事一个项目，该项目包含一个包含一些字段的表格，我想通过 MaterializeCSS 在图标的一侧添加一些 Material Design 图标。看图你就明白了

:

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

【问题讨论】：

标签： css icons materialize google-material-icons

【解决方案1】：

Pedro Muñoz 的评论对我有用。

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

【讨论】：

【解决方案2】：

像这样将它放在 .valign-wrapper 中：

<span class="valign-wrapper"><i class="grey-text material-icons">play_arrow</i>&nbsp 1 Sep 2020</span>
<span class="valign-wrapper"><i class="grey-text material-icons">stop</i>&nbsp 30 Jul 2021</span>

【讨论】：

这个解决方案对我有用。似乎它让材料完成工作（按预期）。
这应该是正确的答案。参考：materializecss.com/helpers.html

【解决方案3】：

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

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

然后在 CSS 中，你可以将 material-icons class 设置成如下样式：

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

【讨论】：

【解决方案4】：

只需将vertical-align: 调整为负值。

示例代码：

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

【讨论】：

【解决方案5】：

您可以将图标 margin-top 更改为任何 POSITIVE 或 NEGATIVE 值以使其对齐。例如，

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

【讨论】：

【解决方案6】：

简单：

你可以用它合并另一个类（“正确”）：

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

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

您可以在 material-icons 类中看到“正确”一词。

【讨论】：

运行 sn-p，你会看到图标没有正确对齐，它比文本更大并且基线更高。
我只是给了 sn-p 用于与物化中可用的内置类进行右侧对齐，而不是自定义它。 codepen.io/bvinothraj/pen/xMaPoR 检查此 url，您可以在其中看到带有右侧对齐图像的登录按钮，而无需任何其他额外的 css 编码。您必须使用正确的父标签来获取它。
*在上一条评论中，改为登录，只需查看菜单中的“ID”即可。

【解决方案7】：

这是一种方法。当然这取决于图标，您必须找到适合图标高度的特定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>

【讨论】：

以下内容对我来说是垂直对齐：顶部没有解决我的问题：.material-icons { display: inline-flex;垂直对齐：文本底部； }
太棒了，行高是我不知道如何找到自己的东西！

【解决方案8】：

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

CSS：

.inline-icon {
   vertical-align: bottom;
   font-size: 18px !important;
}

HTML：

<p>"Your text goes here"<i class="inline-icon material-icons">warning</i></p>

【讨论】：