用于飞镖的 Css Angular 2 材质组件。如何使字形居中？

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 中使用了一个 flexbox -> 显示：inline-flex

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>