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>