【发布时间】：2017-02-24 17:24:31
【问题描述】：
我试图在 CardView 中将容器居中。为了使用 Angular Material，我使用了 layout=column 和 layout-align=center center。然而 layout=column 在子视图的左侧和右侧添加了不必要的填充，如 GREEN 容器内所示。
我怎样才能摆脱 layout=column 引入的这种填充，并将子容器也放在 CardView 中？
<md-card flex="35">
<div class="wingoku-accounts-card-title">
<span class="md-headline">Parents Info</span>
</div>
<div class="wingoku-accounts-div-padding" style="background: green" flex="100" layout="column" layout-align="center center">
<div layout="column" layout-align="center center" flex="100" style="background: red">
<div layout="column" layout-align="center center" style="background: yellow">
<div layout="row" layout-align="center center" flex="100">
<md-input-container class="md-block" flex="40">
<input required type="text" placeholder="Father First Name"
ng-model="fatherFirstName"
enter-pressed=""/>
<div ng-messages="$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<span flex="10"></span>
<md-input-container class="md-block" flex="40">
<input required type="text" placeholder="Father Last Name"
ng-model="fatherLastName"
enter-pressed=""/>
<div ng-messages="$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
<div layout="row" layout-align="center center" flex="100">
<md-input-container class="md-block" flex="40">
<input required type="text" placeholder="Mother First Name"
ng-model="motherFirstName"
enter-pressed=""/>
<div ng-messages="$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<span flex="10"></span>
<md-input-container class="md-block" flex="40">
<input required type="text" placeholder="Mother Last Name"
ng-model="motherLastName"
enter-pressed=""/>
<div ng-messages="$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
<div layout="row" layout-align="center center" flex="100">
<md-input-container class="md-block" flex="40">
<input required type="text" placeholder="Guardian Name"
ng-model="guardianName"
enter-pressed=""/>
<div ng-messages="$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<span flex="10"></span>
<md-input-container class="md-block" flex="40">
<input required type="text" placeholder="Guardian ID Card"
ng-model="guardianIDCardNum"
enter-pressed=""/>
<div ng-messages="$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
<div layout="row" layout-align="center center" flex="100">
<md-input-container class="md-block" flex="40">
<input required type="text" placeholder="Father ID Card"
ng-model="fatherIDCardNum"
enter-pressed=""/>
<div ng-messages="$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
<span flex="10"></span>
<md-input-container class="md-block" flex="40">
<input required type="text" placeholder="Mother ID Card"
ng-model="motherIDCardNum"
enter-pressed=""/>
<div ng-messages="$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
<div layout="row" layout-align="center center" flex="100">
<md-input-container class="md-block" flex="40">
<input required type="text" placeholder="Parent's Email Address"
ng-model="emailAddress"
enter-pressed=""/>
<div ng-messages="$error">
<div ng-message="required">This is required.</div>
</div>
</md-input-container>
</div>
</div>
</div>
</div>
</md-card>
【问题讨论】：
-
你想像左图那样显示？
-
是的。最左边的卡片有正常的填充，但是其他 2 张卡片有过多的填充，这是由 layout=column 引入的
标签： html angularjs node.js angular-material mean-stack