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

Question

Я пытаюсь выровнять по центру Input/Edit Text на карте, используя атрибут 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

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", Это поможет вам выровнять его по горизонтали, однако, чтобы выровнять его по вертикали, вам нужно дать div немного height, Ваш 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>

Вот рабочая ветка вашего кода.