使用角度材料垂直和水平對齊

我正在關注https://material.angularjs.org/latest/layout/alignment的文檔。使用角度材料垂直和水平對齊

我想對齊我的div垂直和水平，它適用於水平對齊，但不適用於垂直。 div的來源如下：

<div layout="column" layout-align="center center" class="text-center"> 
    <md-content> 
    <h2>Test h2</h2> 
    </md-content> 
    <form ng-controller="LoginController as login" ng-submit="login.login()" 
    ng-cloak class="text-center"> 
    <md-content> 
     Login or ,<br/> 
     register test br 
     <md-input-container class="md-block"> 
     <label>Your email address</label> 
     <input ng-model="login.user.email" type="email" required> 
     </md-input-container> 
     <md-input-container class="md-block"> 
     <label>Your password</label> 
     <input ng-model="login.user.password" type="password" required> 
     </md-input-container> 
     <div class="md-block"> 
     <md-button type="submit" class="md-raised md-primary">Log in</md-button> 
     </div> 
    </md-content> 
    </form> 
</div>

這裏有什麼問題？感謝您的幫助

來源

2016-05-05 AndreyS

Plnkr：http://plnkr.co/edit/aCZFrBrY5xYvvFgThRvn?p=preview

看一看主要的div layout="column"和行之後。它們很重要。

<!DOCTYPE html> 
<html> 

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <!-- Angular Material style sheet --> 
    <link data-require="[email protected]" data-semver="1.5.3" rel="stylesheet" href="Bootstrap" /> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" /> 
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
</head> 

<body ng-app="app" layout="column" flex> 
    <div flex layout="column" layout-align="center center" class="text-center"> 
    <div> 
     <md-content> 
     <div layout="row" layout-align="center center"> 
      <h2>Test h2</h2> 
     </div> 
     </md-content> 
     <form ng-controller="MainController as login" ng-submit="login.login()" ng-cloak class="text-center"> 
     <md-content> 
      <p>Some random text is here, login or register</p> 
      <div layout="row" layout-align="center start"> 
      <md-input-container class="md-block"> 
       <label style="text-align:center">Your email address</label> 
       <input ng-model="login.user.email" type="email" required> 
      </md-input-container> 
      </div> 
      <div layout="row" layout-align="center start"> 
      <md-input-container class="md-block"> 
       <label style="text-align:center">Your password</label> 
       <input ng-model="login.user.password" type="password" required> 
      </md-input-container> 
      </div> 
      <div layout="row" layout-align="center center"> 
      <div class="md-block"> 
       <md-button type="submit" class="md-raised md-primary">Log in</md-button> 
      </div> 
      </div> 
     </md-content> 
     </form> 
    </div> 
    </div> 
    <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> 
    <script src="script.js"></script> 
</body> 
</html>

app.js

angular.module('app', ['ngMaterial']); 

angular.module('app').controller('MainController', ["$scope", function($scope) { 

}]);

來源

2016-05-05 16:34:19 salep

<div layout-align='center center' layout='column'>

這將調整中心只有直接子元素。所以將所有要對齊的元素水平和垂直對齊

<div layout-align='center center' layout='column'> 
    <div>ABC</div> 
    <div>XYZ</div> 
</div>

來源

2016-05-05 16:58:53

使用角度材料垂直和水平對齊

回答

相關問題