4

我正在尝试使用 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

4

2 回答 2

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>

演示

于 2016-11-15T17:39:47.110 回答
0

为了居中你应该用 a和 amd-input-container包围它。这将起到水平对齐它的作用，但是为了垂直对齐它，你需要给你的一些. 您应该看起来像这样：（请注意，您可以根据您希望垂直对齐的方式给出您的选择）divlayout="row"divheightmd-cardheightmd-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>

这是您的代码的工作分支。

于 2016-11-15T17:59:02.650 回答