ラベルとアイコンを同じ行に整列します

Question

アイコンの下にテキストを表示したいとします。
私は材料アイコンを使用しています。

私はそれが左側にあるものを達成したいです。しかし、右側が私が得ているものです。

パディング、余白、行の高さなどを試しましたが、整列させることができませんでした。

作業をWebページ上の問題がhere

Htmlの

   <div class="package-rating-detail"> 
        <label>{{package.rating}}</label> 
        <mdl-icon class="mdl-color-text--orange">star_rate</mdl-icon> 
       </div> 

CSS

.package-rating-detail { 
    float: left; 
    margin-left: 20px; 
} 

であるため、どのように私は、ラベルとアイコンを整列させることができます。

Answer 1

はflexをお試しください：

.package-rating-detail[_ngcontent-c3] { 
    display: inline-flex; 
    align-items: center; 
    margin-top: 0.3em; // cosmetic 
    margin-left: 1em; // cosmetic 
} 

UPDATE：あなたはアライメントを改善し、それがスターとラベルの間にいくつかのスペースを追加することによって、より見やすくすることができます

.package-rating-detail[_ngcontent-c3] > label { 
    margin-right: 0.2em; 
    margin-top: 0.2em; 
} 

（margin-top意志私の意見ではより良く見える）、少し下にラベルを取る。