将角材料卡对齐在页面的中心 [英] aligning angular material card in center of the page
本文介绍了将角材料卡对齐在页面的中心的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我制作了一个注册脚本,允许用户注册我的网站。现在我遇到的问题是,注册界面所在的角度材料卡不在中心位置。我已经尝试了很多东西,包括< center>
和[layout-align =center center],仍然没有任何作用
我的代码:
I made a Registration script which allows user to Sign Up to my site. Now the problem I am experiencing that the angular material card, in which the sign up interface lies, isn't at center. I've tried many things including <center>
and [layout-align="center center"], still nothing works
My code:
<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>
推荐答案
add
layout-align="center center"
到外面。
请参阅 http:// codepen.io/anon/pen/vGewVG
这篇关于将角材料卡对齐在页面的中心的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文