CSS-使用圖標將文本居中對齊

Question

在CSS中使用實質性圖標時，我有以下代碼呈現了帶有圖標和文本的鏈接。

<a href="#"><i class="material-icons">group_work</i>Groups</a>

如下圖所示，文本似乎正在下沉。.我希望它們在垂直方向上居中對齊。 我怎樣才能做到這一點？

PS。 （不是設計師！）

Answer 1

要使元素垂直居中，可以使用vertical-algin: middle; 規則。 在您的情況下，最可能是：

.material-icons {
  vertical-align: middle;
}

這是您的深色按鈕示例：

 .material-icons { vertical-align: middle; margin-right: 5px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <a href="#" class="grey darken-3 btn"><i class="material-icons">group_work</i>Groups</a> 

Answer 2

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <a href="#" class="grey darken-4 btn"><i class="material-icons left">group_work</i>Groups</a> 

Answer 3

vertical-align ： applied to the icon i的中間位置可能是最簡單的選項，但結果可能不一致。

通過將鏈接設置為display:inline-flex我發現了更好的結果，但是區別非常微妙。

vertical-align仍可用作不支持的瀏覽器的后備。

 a { margin: 1em; display: inline-block; } ai { vertical-align: middle; } a.flex { display: inline-flex; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <a href="#" class=""><i class="material-icons">group_work</i>Groups</a> <br/> <a href="#" class="flex"><i class="material-icons">group_work</i>Groups</a> 

Answer 4

a {
  display: inline-flex;
  align-items: center;
}

會成功的;）