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

Question

我想显示带有图标的文本。
我正在使用 material 个图标。

我想实现左边的效果。但是右边是我得到的那个。

我尝试了 padding、margin、line height 等所有方法，但我无法使它们对齐。

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

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

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

（margin-top 会把标签放低一点，在我看来这样更好看）。

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

Align Label and Icon in same line

html

css

material-design

angular2-mdl