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

Question

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

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

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

这可以使用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 4

您可以使用

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

或

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

Answer 5

我必须说，这样一个简单的事情应该可以自动使用。 但是您可以使用position: absolute将图标垂直居中，如下所示：

您可以在此处找到demo

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