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