alignement de la carte de matériau angulaire au centre de la page
J'ai créé un script d'enregistrement qui permet à l'utilisateur de s'inscrire sur mon site. Le problème que je rencontre maintenant est que la carte de matériau angulaire, dans laquelle se trouve l'interface d'inscription, n'est pas au centre. J'ai essayé beaucoup de choses, y compris <center> et [layout-align = "center center"], rien ne fonctionne toujoursMon 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>
Vous n'avez pas fermé la balise </form> au bon endroit,
<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>
Cochez cette Plunker
Voici la repository