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

左边距有点居中，但当宽度较小时看起来很糟糕。有些东西不起作用：

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>

Css Angular 2 material 飞镖组件。我如何使字形居中？

Css Angular 2 material components for dart. How do I center a glyph?

html

css

dart

angular2-material

angular