CSS

Question

将 material 图标与 CSS 结合使用，我有以下代码呈现带有图标和文本的 link。

<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

vertical-align:middleapplied to the iconi` 可能是最简单的选项，但结果可能不一致。

我发现将 link 设置为 display:inline-flex 效果更好，但差异非常细微。

vertical-align 仍然可以用作不支持浏览器的后备。

a {
  margin: 1em;
  display: inline-block;
}
a i {
  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 3

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

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

会成功的 ;)

CSS - 文本与图标居中对齐

CSS - Center align text with icon

html

icons

vertical-alignment

google-material-icons