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

您也可以使用，如果relative位置你會把多個圖標放在同一個div中。下面是該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