layout-align = "center"not angular 각도

Question

layout-align 속성을 사용하여 카드의 입력/편집 텍스트를 가운데 정렬하려고합니다. 그러나 나의 무지와 유년기 (오늘 학습 시작)로 인해, 왜이 텍스트 편집 텍스트가이 카드보기 내부에 정렬되지 않는지 알아낼 수 없습니다. 여기

<div flex="50" layout="row" layout-align="center"> 
    <md-card flex="50"> 
     <md-input-container layout-align="center center" class="md-block" flex="50"> 
      <input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" /> 
     </md-input-container> 
    </md-card> 
</div> 

데모 : 재료 가이드 라인에 따르면 https://codepen.io/camden-kid/pen/zBQZLW?editors=1010#0

Answer 1

, 당신은

<md-card flex="50"> 
    <div layout="row" layout-align="center center"> 
     <md-input-container flex="50"> 
      <input required type="text" placeholder="Observation Number" ng-model="learningCenter.observations.obsNum" /> 
     </md-input-container> 
    </div> 
</md-card> 

DEMO

Answer 2

, 행 요소에 입력 컨테이너를 배치해야을 센터에 배치하려면div으로 layout="row"으로 묶어야합니다. 이것은 수평으로 맞추기 위해 속임수를 쓰지 만 수직으로 정렬하려면 div 일부를 height으로 줄 필요가 있습니다. (주 당신이 md-input-container 수직으로 정렬하는 방법에 따라 선택의 height를 제공 할 수 있습니다)

<md-card flex="50"> 
    <div layout="row" layout-align="center center" style="min-height: 100%"> 
     <md-input-container class="md-block" flex="50"> 
      <input required type="text" placeholder="Observation Number" 
       ng-model="learningCenter.observations.obsNum"/> 
     </md-input-container> 
    </div> 
</md-card> 

Here이 코드의 작업 포크입니다 : 귀하의 md-card는 다음과 같이 보일 것입니다.