布局对齐= "center"不起作用的角度

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>

Answer 2

为了使md-input-container居中，您应该用layout="row"包围div。这将使它水平对齐，然而，为了垂直对齐，你需要给你的div一些height。您的md-card应该看起来像这样:(注意，您可以根据您希望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>