将标签和图标对齐在同一行

Question

我想显示图标后面的文字。
我正在使用材质图标。

我想实现左侧的功能。 但是右边是我要得到的。

我尝试了填充，页边距，行高和其他所有内容，但我无法使它们对齐。

有关上述问题的工作网页在这里

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
}

更新：您可以通过在星形和标签之间添加一些空间来改善对齐方式并使其看起来更好：

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

（页margin-top会使标签稍微下降，我认为它看起来更好）。