最近，我在一个包含表格和一些字段的项目上工作，并希望通过MaterializeCSS在图标侧面添加一些Material Design图标。看看下面的图片，你可能就明白了：
:
我已经尝试了所有能在Stack Overflow找到的垂直对齐、内联（块）、弹性布局等方法。所以，不，这不是个重复问题，我真的需要帮助。谢谢。
9个回答
59
我曾经遇到过同样的问题，但是找到了适合我的解决方案。首先，给你想要居中的图标指定一个自定义类。然后，添加一个底部垂直对齐和与其相邻文本匹配或者更小的字体大小。此外，不要在图标类名中指定图标大小。如果这个方法对你有效，请告诉我。
CSS：
.inline-icon {
vertical-align: bottom;
font-size: 18px !important;
}
HTML:
HTML：
<p>"Your text goes here"<i class="inline-icon material-icons">warning</i></p>
- darkknightsds
43
这是一种方法。当然，这取决于图标，您必须找到特定的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.
2
1以下代码对我有用，因为vertical-align: top无法解决我的问题：.material-icons {
display: inline-flex;
vertical-align: text-bottom;
} - Pedro Muñoz
太棒了，行高是我自己不知道如何找到的东西！ - milcak
15
只需将vertical-align:调整为负值即可。
示例代码：
<i class="material-icons" style="vertical-align: -6px;">folder</i>
- KirtJ
13
您可以在HTML中执行以下操作：
<span>ID</span> <i class="material-icons">info</i>
然后在CSS中，您可以按照以下方式为material-icons类设置样式：
注：以下是翻译的内容，请勿包含在回答中。.material-icons {
display:inline-flex;
vertical-align:top;
}
- Mwiza
5
将其放置在.valign-wrapper中，如下所示：
<span class="valign-wrapper"><i class="grey-text material-icons">play_arrow</i>  1 Sep 2020</span>
<span class="valign-wrapper"><i class="grey-text material-icons">stop</i>  30 Jul 2021</span>
- Ahmed Zakaria
3
1这个解决方案对我很有效。看起来它让材料自己完成了工作（正如预期的那样）。 - leekei
2这应该是正确的答案。参考：https://materializecss.com/helpers.html - Bossman
我尝试了2016年被接受的回答，使用
vertical-align:top，以及2018年和2019年使其成为底部或负数的答案，但这些都无法在较新版本的材料中工作。这个答案是唯一一个适用于较新版本的材料。 - Keith E. Truesdell3
将这里作为答案，因为Pedro Muñoz的评论对我有用。
.material-icons { display: inline-flex; vertical-align: text-bottom; }
- Anonymous Creator
2
这个 CSS 对我很有效。它基本上重置了字体大小和行高，然后将其对齐到基线的底部。
.material-icons {
font-size: inherit;
line-height: inherit;
vertical-align: bottom;
}
- Muhammad Syauqy
2
您可以将图标的margin-top属性更改为任何正数或负数值以进行对齐。例如，将其设置为：
<i class="material-icons" style="margin-top:-10px">info_outline</i>
- luke77
1
简单：
你可以将另一个类（"right"）与它合并：
<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>- VIRA
3
2运行代码片段，你会发现图标没有正确对齐，它比文本更大且基线更高。 - MucaP
我刚刚提供了一个片段，使用Materialize中可用的内置类进行右侧对齐，而不是自定义它。请查看此URL https://codepen.io/bvinothraj/pen/xMaPoR，在其中您可以看到登录按钮与右侧对齐的图像，而无需任何其他额外的CSS编码。您必须使用正确的父级标签来获取它。 - VIRA
在之前的评论中，不要登录，只需查看菜单中的“ID”。 - VIRA
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
align-items: baseline启用），那么基线对齐应该是答案。也许有人应该报告一个bug。 - capr