對齊角度材料卡在頁面中心

Question

我做了一個註冊腳本，它允許用戶註冊我的網站。現在我遇到的問題是，註冊界面所在的角度材料卡不在中心位置。我嘗試過很多事情，比如<center>和[佈局-ALIGN =「中心中心」]，仍然沒有什麼工作 我的代碼：

<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> 

Answer 1

增加

layout-align="center center" 

向外。

看到http://codepen.io/anon/pen/vGewVG

Answer 2

您沒有在正確的位置，關閉</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

這裏是repository