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

Question

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

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

输出：

我确实尝试过使用 span 在示例文本上使用垂直对齐，但无法正常工作，而且感觉有点老套。

有谁知道如何得到这个效果吗？

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 */
}

另一种选择是使用 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 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 中：

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

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 将图标垂直居中，如下所示：

您可以在此处找到 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;
  }

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

Angular-Material2: Align text and md-icon vertically to match vertical style?

angular-material

angular-material2

angular