Css 다트 용 앵귤러 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

에서 문자 모양 아이콘의 중심을 시도하고

글리프?

코드가 CSS의 인 flexbox를 사용 https://github.com/dart-lang/angular2_components/blob/master/lib/src/components/glyph/glyph.scss.css에서

-> 디스플레이 : 여백 왼쪽 일종의을 중심으로한다

인라인 플렉스,하지만 폭이 작은 경우 나쁜 보인다.

text-align: center 

및

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

및 micronyks 제안에 따라 작동이

display:block; 
margin:auto; 

Answer 1

:

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