Javascript 使用角度材料垂直和水平对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37048126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align Vertically and Horizontally with Angular Material
提问by Andrey Saleba
I'm following the documentation on https://material.angularjs.org/latest/layout/alignment.
我正在关注https://material.angularjs.org/latest/layout/alignment上的文档。
I'm trying to align my div vertically and horizontally, it works for horizontal alignment but not for vertical. Source of the div is below:
我正在尝试垂直和水平对齐我的 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>
What is the problem here? Thanks for your help
这里有什么问题？谢谢你的帮助
采纳答案by salep
Plnkr : http://plnkr.co/edit/aCZFrBrY5xYvvFgThRvn?p=preview
Plnkr : http://plnkr.co/edit/aCZFrBrY5xYvvFgThRvn?p=preview
Take a look at the main divs after layout="column"and row. They are important.
看看layout="column"行之后的主要 div 。它们很重要。
<!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
应用程序.js
angular.module('app', ['ngMaterial']);
angular.module('app').controller('MainController', ["$scope", function($scope) {
}]);
回答by Jagajit Prusty
<div layout-align='center center' layout='column'>
This will align center only to immediate child element. So wrap all element to which you want to align horizontal and vertically center
这只会将中心对齐到直接的子元素。因此，将要水平和垂直居中对齐的所有元素包裹起来
<div layout-align='center center' layout='column'>
<div>ABC</div>
<div>XYZ</div>
</div>
