layout-align="center" 不工作 Angular

Question

我正在尝试使用 layout-align 属性将卡片中的 Input/Edit 文本居中对齐。但是由于我的无知和婴儿期（今天开始学习），我无法弄清楚为什么编辑文本不会在这张卡片视图中居中对齐。

<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

根据material指南，您需要将输入容器放在行元素中，

<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 应该看起来像这样：（请注意，您可以根据您希望 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 是您代码的工作分支。

layout-align="center" 不工作 Angular

layout-align="center" not working Angular

angularjs

angular-material

cardview