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

Question

我想显示文本后跟一个图标。
我正在使用材质图标。

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

我尝试了填充、边距、行高等一切，但无法使它们对齐。

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

网页

                <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会将标签降低一点，我认为这看起来更好）。