html - 用于 Dart 的 Css Angular 2 Material 组件。我如何使字形居中？

Question

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

margin-left 有点居中，但当宽度较小时看起来很糟糕。有些东西不起作用:

text-align: center

和

align-items: center;
justify-content: center;

和

display:block;
margin:auto;

Answer 1

这适用于 micronyks 的建议:

<div class="border">
    <div class="centerText">
        <glyph [icon]="'star'" ></glyph>
    </div>
    <div class="centerText">
        This Is Text that is centered.
    </div>
</div>