CSS 将材质图标与 Materialize 上的文本对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39907145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align material icon with text on Materialize
提问by MucaP
Recently, i started working on a project that contains a table with some fields, and I want to add some Material Design Icons trough MaterializeCSS on the side of the icons. Look at the image and you might get it
最近，我开始着手一个项目，其中包含一个带有一些字段的表格，我想在图标的侧面通过 MaterializeCSS 添加一些 Material Design 图标。看看图片，你可能会明白
:
：
I tried everything, vertical align, inline(-block), flex, and everything I could find in stack overflow. So no, it's not a duplicate, I really need help. Thank you.
我尝试了所有方法，垂直对齐、内联（-block）、flex 以及我能在堆栈溢出中找到的所有方法。所以不，它不是重复的，我真的需要帮助。谢谢你。
采纳答案by Theodore K.
That's one way to do it. Of course it depends on the icon, you have to find the specific font-sizethat will fit the icon's height. Examples:
这是一种方法。当然，这取决于图标，您必须找到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>回答by darkknightsds
I had the same issue for the longest time but found a solution that worked for me. First, give a custom class to the icon you want to center. Then, add a bottom vertical align and a font-size that matches or is smaller than the text it is placed next to. Also, don't specify icon size in the icon classname. Let me know if this works for you.
我在最长的时间内遇到了同样的问题，但找到了一个对我有用的解决方案。首先，为要居中的图标提供自定义类。然后，添加一个底部垂直对齐和一个匹配或小于它旁边放置的文本的字体大小。另外，不要在图标类名中指定图标大小。让我知道这是否适合您。
CSS:
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>
回答by KirtJ
Simply adjust the vertical-align:into negative value.
只需将其调整vertical-align:为负值。
sample code:
示例代码：
<i class="material-icons" style="vertical-align: -6px;">folder</i>
回答by Mwiza
You can do the following in the HTML:
您可以在 HTML 中执行以下操作：
<span>ID</span> <i class="material-icons">info</i>
Then in the CSS, you can style material-icons classas follows:
然后在 CSS 中，您可以将material-icons 类设置为如下样式：
.material-icons {
display:inline-flex;
vertical-align:top;
}
回答by Make this world a better place
You may change the icon margin-top to any POSITIVE or NEGATIVE value to align it. For example,
您可以将图标 margin-top 更改为任何 POSITIVE 或 NEGATIVE 值以对齐它。例如，
<i class="material-icons" style="margin-top:-10px">info_outline</i>
回答by VIRA
Simple:
简单的：
you can just coalesce an another class ("right") with it:
你可以用它合并另一个类（“正确”）：
<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>you can see word "right" in the material-icons class.
您可以在 material-icons 类中看到“正确”一词。
