각도 재료가 정렬되지 않음

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

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