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代碼使用Flexbox的在CSS - >顯示：直列撓曲

的保證金左被排序的定心，但它很糟糕當寬度較小。有些事情，沒有工作：

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>