layout-align = "center" не работает Angular

Question

Я пытаюсь центрировать выравнивание ввода/редактирования текста на карте с помощью атрибута layout-align. Однако из-за моего невежества и младенчества (началось обучение сегодня), я не могу понять, почему Edit Text не будет выравниваться по центру внутри этой карты View.

<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

Чтобы центрировать md-input-container вы должны окружить его div с помощью layout="row". Это сделает трюк, чтобы выровнять его по горизонтали, однако для выравнивания по вертикали вам нужно указать divheight. Ваш md-card должен выглядеть следующим образом: (обратите внимание, что вы можете дать height по своему выбору в зависимости от того, как вы хотите, чтобы md-input-container для выравнивания по вертикали)

<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 является рабочей вилкой вашего кода.