角度のある素材カードをページ中央に整列する

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

は0123を追加で確認

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