HTML:
<div class="border">
<glyph class="center" [icon]="'star'" ></glyph>
<div class="centerText">
This Is Text that is centered.
</div>
</div>
CSS:
.centerText{
text-align: center;
}
.border{
border: solid black;
width: 80px;
}
.center{
margin-left: 50%;
}
结果:
我正在尝试将来自https://github.com/dart-lang/angular2_components的字形图标居中
如何使字形居中?
在https://github.com/dart-lang/angular2_components/blob/master/lib/src/components/glyph/glyph.scss.css中,代码在 css -> display: inline-flex 中使用了一个 flexbox
左边距有点居中,但当宽度更小时看起来很糟糕。有些事情不起作用:
text-align: center
和
align-items: center;
justify-content: center;
和
display:block;
margin:auto;