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