將材質圖標與 Materialize 上的文本對齊

Question

最近，我開始從事一個項目，該項目包含一個包含一些字段的表格，我想通過 MaterializeCSS 在圖標的一側添加一些材料設計圖標。 看看圖片，你可能會明白

：

我嘗試了所有方法，垂直對齊、內聯（-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> 

Answer 6

您可以將圖標 margin-top 更改為任何 POSITIVE 或 NEGATIVE 值以對齊它。 例如，

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

Answer 7

簡單：

你可以用它合並另一個類（“正確”）：

 <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 類中看到“正確”一詞。

Answer 8

放在這里作為 Pedro Muñoz 的評論對我有用的答案。

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

Answer 9

這個 css 適合我。 它基本上是重置字體大小和行高，然后將其對齊到基線的底部..

.material-icons {
  font-size: inherit;
  line-height: inherit;
  vertical-align: bottom;
}