CSS - 中心使文字与图标对齐 [英] CSS - Center align text with icon

问题描述

使用带有CSS的材质图标，我有以下代码可以呈现带有图标和文字的链接。

Using material icons with CSS, I have the following code that renders a link with icon and text.

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

正如您在下面的图片中看到的，文字似乎正在下沉..我想他们要垂直对齐在一起。我该如何做到这一点？

As you can see in the image below, the text seems to be sinking down.. I would like them to be vertically aligned center together. How can i achieve this?

PS 。 （不是设计师！）

PS. (Not a designer!)

推荐答案

要垂直居中元素，您可以使用 vertical-algin：middle; 规则。在你的情况下，这最有可能是：

To vertically center elements, you can use the vertical-algin: middle; rule. In your case, that would most propably be:

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

下面是一个使用黑暗按钮的例子：

Here is an example with your dark button:

.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>

这篇关于CSS - 中心使文字与图标对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！