layout-align="center" not working Angular

Question

I am trying to center align the Input/Edit Text in the card using the layout-align attribute. However due to my ignorance and infancy (started learning today), I am unable to figure out why the Edit Text won't get center aligned inside this card 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>

Demo here: https://codepen.io/camden-kid/pen/zBQZLW?editors=1010#0

Answer 1

According to the material guideline, you need to place the input-container in a row element,

<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