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>

<强> 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>

set :site_url, 'http://www.gerardcondon.com/chess'

Here是您代码的工作分支。

布局对齐=＆＃34;中心＆＃34;不工作Angular

2 个答案: