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

Question

我知道我可能在这里遗漏了一些东西.我试图垂直对齐md-icon和一些文本,现在,"示例文本"一词显示在图标下方.

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

输出:

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

有谁知道如何获得这种效果？

Answer 1

我利用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 2

这是使用时的常见问题<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 */
}

relative如果您要在同一个div中放置多个图标,也可以使用位置.这是css:

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

另一种选择是使用flex屏幕上的外层div并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 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;
}