[英]Align Label and Icon in same line
I want to show text follwed by an icon. 我想显示图标后面的文字。
I'm using material icons. 我正在使用材质图标。
I want to achieve what it is on the left. 我想实现左侧的功能。 But the right side is the one I'm getting.
但是右边是我要得到的。
I tried padding,margin,line height and everything but I couldn't make them align. 我尝试了填充,页边距,行高和其他所有内容,但我无法使它们对齐。
The Working webpage for the above issue is here 有关上述问题的工作网页在这里
Html HTML
<div class="package-rating-detail">
<label>{{package.rating}}</label>
<mdl-icon class="mdl-color-text--orange">star_rate</mdl-icon>
</div>
css 的CSS
.package-rating-detail {
float: left;
margin-left: 20px;
}
So how can I align the label and the icon. 因此,如何对齐标签和图标。
Try flex
: 尝试
flex
:
.package-rating-detail[_ngcontent-c3] {
display: inline-flex;
align-items: center;
margin-top: 0.3em; // cosmetic
margin-left: 1em; // cosmetic
}
UPDATE: You can improve the alignment and make it look better by adding some space between the star and the label: 更新:您可以通过在星形和标签之间添加一些空间来改善对齐方式并使其看起来更好:
.package-rating-detail[_ngcontent-c3] > label {
margin-right: 0.2em;
margin-top: 0.2em;
}
(the margin-top
will take the label a bit down, which looks better in my opinion). (页
margin-top
会使标签稍微下降,我认为它看起来更好)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.