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

Question

我想用图标显示文字。
我正在使用素材图标。

我想要实现左边的目标。但右边是我得到的那个。

我尝试了填充，边距，线条高度以及所有内容，但我无法使它们对齐。

上述问题的工作网页为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
}

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

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

（margin-top会使标签略微下降，在我看来看起来更好。）