43

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

：例子

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

4

8 回答 8

39

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

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>
于 2017-10-09T23:23:06.047 回答
34

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

于 2016-10-10T07:38:03.093 回答
12

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

示例代码：

<i class="material-icons" style="vertical-align: -6px;">folder</i>
于 2019-06-13T08:15:45.200 回答
10

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

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

然后在 CSS 中，您可以按如下方式设置 material-icons 类的样式：

.material-icons {
    display:inline-flex;
    vertical-align:top;
}
于 2019-07-27T20:39:19.483 回答
4

像这样将它放在 .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>
于 2020-07-23T03:43:03.717 回答
2

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

<i class="material-icons" style="margin-top:-10px">info_outline</i>
于 2019-03-14T15:52:48.430 回答
1

Pedro Muñoz 的评论对我有用，因此放在这里作为答案。

.material-icons { display: inline-flex; vertical-align: text-bottom; }
于 2021-06-21T14:42:00.927 回答
0

简单的：

您可以将另一个类（“正确”）与它合并：

<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>

您可以在材料图标类中看到“正确”一词。

于 2019-02-12T05:41:15.850 回答