Angular-Material2：垂直对齐文本和 md-icon 以匹配垂直样式？

Question

我知道我可能在这里遗漏了一些东西。我正在尝试垂直对齐 md-icon 和一些文本，现在“示例文本”一词显示在图标下方。

<div>
  <md-icon>home</md-icon> Sample Text
</div>

输出：

我确实尝试使用跨度在示例文本上进行垂直对齐，但无法让任何东西正常工作，而且无论如何都感觉有点hacky。

有人知道如何达到这个效果吗？

Answer 1

这是使用

<md-icon>

时的常见问题。要对齐图标和文本，您可以将文本放在跨度内并对其应用样式：

<div>
  <md-icon>home</md-icon><span class="aligned-with-icon">Sample Text</span>
</div>

在你的component.css中：

.aligned-with-icon{
    position: absolute;
    margin-top: 5px;
    margin-left: 5px; /* optional */
}

如果您要将多个图标放在同一个 div 中，也可以使用

relative

位置。这是CSS：

.aligned-with-icon-relative{
    position: relative;
    top: -5px;
    margin-left: 5px; /* optional */
}

---

另一种选择是在外部 div 上使用

flex

显示，并使用

align-items

到

center

：

在你的html中：

<div class="with-icon">
  <md-icon>home</md-icon>Sample Text
</div>

在你的CSS中：

.with-icon {
    display: flex;
    align-items: center;
}

---

这是一个 Plunker 演示

Answer 2

我使用

inline

属性。 这将使图标根据按钮的大小正确缩放。

    <button mat-button>
      <mat-icon inline=true>local_movies</mat-icon>
      Movies
    </button>

    <!-- Link button -->
    <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>

我将此添加到我的

styles.css

中：

• 解决按钮内图标垂直对齐问题
• 与按钮文本相比，材质图标字体总是有点太小了

button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
  vertical-align: top;
  font-size: 1.25em;
}

Answer 3

你可以使用

div {
    display: flex;
    vertical-align: middle;
}

或

span {
    display: inline-flex;
    vertical-align: middle;
}

Answer 4

这可以使用 CSS flexbox 来实现

<!-- HTML part -->

<div class="outer-div">
 <mat-icon>home</mat-icon>
 <span>Home</span>
</div>

<!-- CSS part -->
.outer-div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.outer-div > span {
  font-size: 10px;
}

Answer 5

我必须说，这么简单的事情应该可以开箱即用。 但您可以使用

position: absolute

将图标垂直居中，如下所示：

您可以在这里找到演示

button {
  /* manually making space for mat-icon because
    mat-icon is not position: absolute
  */
  padding-left: 30px; 
}
::ng-deep .mat-icon{
    font-size: 16px !important; /*change this as per your needs*/
    position: absolute;
    top: 50%;
    transform: translate(-22px, -50%);

    /*centering image inside mat-icon box*/
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

Answer 6

按照@rynop给出的答案，但对于简单的

div

的情况，将其放入

src\styles.scss

足以修复对齐：

.mat-icon.mat-icon-inline:not(:only-child) {
  vertical-align: top;
}