在同一行对齐标签和图标答案

【问题标题】：Align Label and Icon in same line在同一行对齐标签和图标
【发布时间】：2017-11-28 02:26:10
【问题描述】：

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

我想实现左边的内容。但右边是我得到的那个。

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

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

那么我该如何对齐标签和图标。

【问题讨论】：

标签： html css material-design angular2-mdl

【解决方案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 会稍微降低标签，我认为这看起来更好）。

【讨论】：