角度 - 素材2：テキストとmd-iconを垂直スタイルに合わせて縦に整列させますか？

Question

私はおそらくここに何か不足していることを知っています。 md-iconといくつかのテキストを垂直に整列しようとしていますが、今すぐ "sample text"という単語がアイコンの下に表示されます。

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

出力：

私はスパンを使用してサンプルテキストに垂直整列で遊んでみてくださいでしたが、働いて何かを得ると、とにかく種類のハック感じられませんでした。

誰でもこの効果を得る方法を知っていますか？ <md-icon>を使用した場合

おかげ

Answer 1

は、これは一般的な問題です。アイコンとテキストを揃えるためには、スパン内のテキストを入れて、それにスタイルを適用することができます。

あなたcomponent.cssで

<div> 
    <md-icon>home</md-icon><span class="aligned-with-icon">Sample Text</span> 
</div> 

：またrelative位置の場合を使用することができます

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

あなたは同じdivに複数のアイコンを置くでしょう。ここではそのためのCSSは次のとおりです。

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

---

別のオプションは、外側のdivとcenterへalign-itemsにflexディスプレイを使用することです：

あなたのHTML内

：

<div class="with-icon"> 
    <md-icon>home</md-icon>Sample Text 
</div> 

あなたのCSSで：

.with-icon { 
    display: flex; 
    align-items: center; 
} 

---

ここでは、この上のPlunker Demo