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

Question

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

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

输出：

我确实尝试过使用跨度在示例文本上进行垂直对齐，但无法获得任何工作，并且无论如何都感觉有点笨拙。

有谁知道这个效果怎么弄？

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 display 并将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;
  }