在Materialise上将材质图标与文本对齐

Question

最近,我开始研究一个包含一些带有某些字段的表的项目,我想通过图标一侧的MaterialiseCSS添加一些Material Design Icons.看看图像,你可能会得到它

:

我尝试了一切,垂直对齐,内联(-block),flex,以及我在堆栈溢出中找到的所有内容.所以不,这不是重复,我真的需要帮助.谢谢.

Answer 1

我有同样的问题,但是找到了一个对我有用的解决方案.首先,为要居中的图标提供自定义类.然后,添加一个底部垂直对齐和一个匹配或小于它旁边的文本的字体大小.另外,请勿在图标类名中指定图标大小.如果这对您有用,请告诉我.

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>

Answer 2

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

Answer 3

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

示例代码：

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

Answer 4

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

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

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

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

Answer 5

将其放入 .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>