在页面中央对齐 angular material 卡片
aligning angular material card in center of the page
我制作了一个注册脚本,允许用户注册到我的站点。现在我遇到的问题是注册界面所在的 angular material 卡不在中心。我已经尝试了很多东西,包括 <center>
和 [layout-align="center center"],仍然没有任何效果
我的代码:
<md-content class="md-padding" layout-xs="column" layout="row">
<div flex-xs flex-gt-xs="40" layout="column" layout-align="center center">
<md-card class="card-40-center">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Sign Up</span>
</md-card-title-text>
</md-card-title>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="signup_form">
<div class="md-padding" layout-align="center">
<div layout="row">
<md-input-container flex="100">
<label>First name</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Last name</label>
<input>
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Username</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Email</label>
<input type="email">
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Password</label>
<input type="password">
</md-input-container>
<md-input-container flex="100">
<label>Repeat Password</label>
<input type="password">
</md-input-container>
</div>
<div ng-controller="selectGender as ctrl">
<div layout="row">
<md-input-container flex="100" layout="column" layout-align="center">
<label>Gender</label>
<md-select ng-model="ctrl.userState">
<md-option
ng-repeat="state in ctrl.states"
value="{{state.abbrev}}"
ng-disabled="$index === 2"
>
{{state.abbrev}}
</md-option>
</md-select>
</md-input-container>
<div ng-controller="selectDate">
<div flex="100">
<md-datepicker
ng-model="myDate"
md-placeholder="Enter date"
></md-datepicker>
</div>
</div>
</div>
</div>
</div>
<md-card-actions layout="row" layout-align="center">
<br>
<center>
<md-button class="md-primary md-raised signup_button" type="submit">Sign Up</md-button>
</center>
</form>
</md-card-actions>
<md-card-content>
</md-card-content>
</md-card>
</div>
</md-content>
您没有在正确的地方关闭 </form>
标签,
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="signup_form">
<div class="md-padding" layout-align="center">
<div layout="row">
<md-input-container flex="100">
<label>First name</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Last name</label>
<input>
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Username</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Email</label>
<input type="email">
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Password</label>
<input type="password">
</md-input-container>
<md-input-container flex="100">
<label>Repeat Password</label>
<input type="password">
</md-input-container>
</div>
<div ng-controller="selectGender as ctrl">
<div layout="row">
<md-input-container flex="100" layout="column" layout-align="center">
<label>Gender</label>
<md-select ng-model="ctrl.userState">
<md-option
ng-repeat="state in ctrl.states"
value="{{state.abbrev}}"
ng-disabled="$index === 2"
>
{{state.abbrev}}
</md-option>
</md-select>
</md-input-container>
<div ng-controller="selectDate">
<div flex="100">
<md-datepicker
ng-model="myDate"
md-placeholder="Enter date"
></md-datepicker>
</div>
</div>
</div>
</div>
</div>
</form>
勾选这个Plunker
添加
layout-align="center center"
向外.
我制作了一个注册脚本,允许用户注册到我的站点。现在我遇到的问题是注册界面所在的 angular material 卡不在中心。我已经尝试了很多东西,包括 <center>
和 [layout-align="center center"],仍然没有任何效果
我的代码:
<md-content class="md-padding" layout-xs="column" layout="row">
<div flex-xs flex-gt-xs="40" layout="column" layout-align="center center">
<md-card class="card-40-center">
<md-card-title>
<md-card-title-text>
<span class="md-headline">Sign Up</span>
</md-card-title-text>
</md-card-title>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="signup_form">
<div class="md-padding" layout-align="center">
<div layout="row">
<md-input-container flex="100">
<label>First name</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Last name</label>
<input>
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Username</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Email</label>
<input type="email">
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Password</label>
<input type="password">
</md-input-container>
<md-input-container flex="100">
<label>Repeat Password</label>
<input type="password">
</md-input-container>
</div>
<div ng-controller="selectGender as ctrl">
<div layout="row">
<md-input-container flex="100" layout="column" layout-align="center">
<label>Gender</label>
<md-select ng-model="ctrl.userState">
<md-option
ng-repeat="state in ctrl.states"
value="{{state.abbrev}}"
ng-disabled="$index === 2"
>
{{state.abbrev}}
</md-option>
</md-select>
</md-input-container>
<div ng-controller="selectDate">
<div flex="100">
<md-datepicker
ng-model="myDate"
md-placeholder="Enter date"
></md-datepicker>
</div>
</div>
</div>
</div>
</div>
<md-card-actions layout="row" layout-align="center">
<br>
<center>
<md-button class="md-primary md-raised signup_button" type="submit">Sign Up</md-button>
</center>
</form>
</md-card-actions>
<md-card-content>
</md-card-content>
</md-card>
</div>
</md-content>
您没有在正确的地方关闭 </form>
标签,
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="signup_form">
<div class="md-padding" layout-align="center">
<div layout="row">
<md-input-container flex="100">
<label>First name</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Last name</label>
<input>
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Username</label>
<input>
</md-input-container>
<md-input-container flex="100">
<label>Email</label>
<input type="email">
</md-input-container>
</div>
<div layout="row">
<md-input-container flex="100">
<label>Password</label>
<input type="password">
</md-input-container>
<md-input-container flex="100">
<label>Repeat Password</label>
<input type="password">
</md-input-container>
</div>
<div ng-controller="selectGender as ctrl">
<div layout="row">
<md-input-container flex="100" layout="column" layout-align="center">
<label>Gender</label>
<md-select ng-model="ctrl.userState">
<md-option
ng-repeat="state in ctrl.states"
value="{{state.abbrev}}"
ng-disabled="$index === 2"
>
{{state.abbrev}}
</md-option>
</md-select>
</md-input-container>
<div ng-controller="selectDate">
<div flex="100">
<md-datepicker
ng-model="myDate"
md-placeholder="Enter date"
></md-datepicker>
</div>
</div>
</div>
</div>
</div>
</form>
勾选这个Plunker
添加
layout-align="center center"
向外.