Menu
I'm following the documentation on 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 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
957
Material-UI Align Right If you need to horizontally align using only CSS, remember that justify-content horizontally aligns using the following values: flex-start: horizontally aligns left center: horizontally aligns center
The Grid Item in the top row will be vertically aligned top, the center row will be vertically aligned center, and the bottom row will be vertically aligned bottom. Ignore the className, it simply styles the borders on each item. Take a look at the Grid image in the intro for a mental picture.
Then we can add the clearfix hack to the containing element to fix this problem: There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding: I am vertically centered. To center both vertically and horizontally, use padding and text-align: center: I am vertically and horizontally centered.
But it's only aligning the content horizontally and not vertically. Here's the plnkr link of the code I'm trying. Show activity on this post. The reason why it is not centering it vertically is because your div containing the layout-align attribute does not have a height.
<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>
Plnkr : http://plnkr.co/edit/aCZFrBrY5xYvvFgThRvn?p=preview
Take a look at the main divs after layout="column" and row. They are important.
<!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) {
}]);
answered Oct 19 '22 12:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With