角材が整列していない

Question

md-inputの要素がレイアウトを試しても整列していません。誰かが間違っていることを教えてもらえるか？

angular.module('app', ['ngMaterial']). 
 
controller('ctrl', function() { 
 

 
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 

 
<!-- Angular Material Library --> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div layout="row" layout-align="center center" flex id="containerCustomerDetails"> 
 
    <md-card flex> 
 
     <md-card-content layout="row" layout-align="space-between center" > 
 
     <div flex layout="row" layout-align="space-around center"> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Delivery</label> 
 
      <md-select ng-model="delivery"> 
 
       <md-option ng-repeat="mode in delivery" value="{{mode.mode}}"> 
 
       {{mode.mode}} 
 
       </md-option> 
 
      </md-select> 
 
      </md-input-container> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Phone number</label> 
 
      <input ng-model="phone" type="text" placeholder="Phone Number"> 
 
      </md-input-container> 
 
     </div> 
 
     </md-card-content> 
 
     <md-card-actions layout="row" layout-align="center center"> 
 
     <md-button class="md-raised">Login</md-button> 
 
     </md-card-actions> 
 
    </md-card> 
 
    </div> 
 
</div>

Answer 1

（コンソール内の要素を検査することで、これを見ることができます）2 md-input-containerの高さが異なっているので、彼らは自動的にあなたが望むように整列しています。あなたの現在の設定のために私は、いくつかのCSSを追加することをお勧め：

#delivery { 
    margin-top: -7px; 
} 

angular.module('app', ['ngMaterial']). 
 
controller('ctrl', function() { 
 

 
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 

 
<!-- Angular Material Library --> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
 

 
<style> 
 
#delivery { 
 
    margin-top: -7px; 
 
} 
 
</style> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div layout="row" layout-align="center center" flex id="containerCustomerDetails"> 
 
    <md-card flex> 
 
     <md-card-content layout="row" layout-align="space-between center" > 
 
     <div flex layout="row" layout-align="space-around center"> 
 
      <md-input-container class="md-block" flex="35" id="delivery"> 
 
      <label>Delivery</label> 
 
      <md-select ng-model="delivery"> 
 
       <md-option ng-repeat="mode in delivery" value="{{mode.mode}}"> 
 
       {{mode.mode}} 
 
       </md-option> 
 
      </md-select> 
 
      </md-input-container> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Phone number</label> 
 
      <input ng-model="phone" type="text" placeholder="Phone Number"> 
 
      </md-input-container> 
 
     </div> 
 
     </md-card-content> 
 
     <md-card-actions layout="row" layout-align="center center"> 
 
     <md-button class="md-raised">Login</md-button> 
 
     </md-card-actions> 
 
    </md-card> 
 
    </div> 
 
</div>

Answer 2

はあなただけcenterdivにレイアウト揃える削除することができます。カスタムCSSを追加する必要はありません。

<div flex layout="row" layout-align="space-around"> 

angular.module('app', ['ngMaterial']). 
 
controller('ctrl', function() { 
 

 
});

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script> 
 

 
<!-- Angular Material Library --> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css"> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div layout="row" layout-align="center center" flex id="containerCustomerDetails"> 
 
    <md-card flex> 
 
     <md-card-content layout="row" layout-align="space-between center" > 
 
     <div flex layout="row" layout-align="space-around"> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Delivery</label> 
 
      <md-select ng-model="delivery"> 
 
       <md-option ng-repeat="mode in delivery" value="{{mode.mode}}"> 
 
       {{mode.mode}} 
 
       </md-option> 
 
      </md-select> 
 
      </md-input-container> 
 
      <md-input-container class="md-block" flex="35"> 
 
      <label>Phone number</label> 
 
      <input ng-model="phone" type="text" placeholder="Phone Number"> 
 
      </md-input-container> 
 
     </div> 
 
     </md-card-content> 
 
     <md-card-actions layout="row" layout-align="center center"> 
 
     <md-button class="md-raised">Login</md-button> 
 
     </md-card-actions> 
 
    </md-card> 
 
    </div> 
 
</div>