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

会成功的;）