각도 재질 CSS 정렬 문제

현재 브라우저의 너비가 작아지면 ... 내 아이콘이 왼쪽으로 떠있게됩니다.각도 재질 CSS 정렬 문제

어떻게 그들을 좌우 중앙에있을 수 있습니까? 어떤 도움을 주시면 감사하겠습니다.

HTML :

<div ng-app="sandbox"> 
    <div layout="column" layout-fill> 
    <div class="flexbox-parent"> 
     <div layout="row" layout-align="center center" style="height: 600px;"> 
     <div id="icons"> 
      <i class="fa fa-facebook fa-5x circle-icon"></i> 
      <i class="fa fa-facebook fa-5x circle-icon"></i> 
      <i class="fa fa-facebook fa-5x circle-icon"></i> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

CSS :

#icons i { 
    color: #fff; 
    margin-left: 10px; 
    margin-right: 10px; 
} 

.circle-icon { 
    background: #3b5998; 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    text-align: center; 
    line-height: 100px; 
    vertical-align: middle; 
    padding: 30px; 
}

은 내가 잘 모르겠어요 #icons

JSFiddle Demo

출처

2016-10-30 user4756836

에 layout-align="center center"를 사용하여 시도했다가 이것은 각도 재료 클래스이므로 수동으로 래퍼에 text-align: center을 설정하여이 작업을 수행 할 수 있습니다. 네 예에서이 같이 갈 것 : 당신은 어떤 CSS 필요가 없습니다

#icons { 
    text-align: center; 
}

Fiddle

출처

2016-10-30 21:05:16 Aer0

아! 간단한 해결책 ... 내가 무엇을 생각하고 있었는지 확실하지 않다. – user4756836

다행이다. 언급했듯이 여전히 더 나은 해결책이 있습니다. 나는 또한 문서를 살펴 봤지만 지금까지 제대로 작동하는 해결책을 찾지 못했습니다. 어쩌면 그게 진짜 거래일지도 몰라. – Aer0

-CodePen

마크 업

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout="column" layout-align="center center"> 
    <div layout="column"> 
    <i class="fa fa-facebook fa-5x circle-icon"></i> 
    <i class="fa fa-facebook fa-5x circle-icon"></i> 
    <i class="fa fa-facebook fa-5x circle-icon"></i> 
    </div> 
</div>

출처

2016-10-31 09:28:42

각도 재질 CSS 정렬 문제

답변

관련 문제