Sam Claus Sam Claus - 1 month ago 10
AngularJS Question

Align child md-card to center of parent using angular-material?

Here I have a login screen consisting of a high resolution image background, and a simple login card, which I want to center in the middle of the screen.



How can I center the card vertically and horizontally in the parent, which is a simple

div
with a background image? Here is my HTML, for which I have not made any external CSS classes yet:

<div style="background-image: url('./res/img/bg-2.jpg'); width: 100%; height: 100%; background-size: cover;" layout-align="center center">
<md-card style="width: 30%; margin: 0;" layout-padding md-whiteframe="10">
<form name="loginForm" novalidate ng-model="loginForm">
<h2 style="margin-top: 0;">Login</h2>
<md-input-container class="md-block" flex-gt-sm>
<label>Username</label>
<input type="text" ng-model="username">
</md-input-container>
<md-input-container class="md-block" flex-gt-sm>
<label>Password</label>
<input type="text" ng-model="password">
</md-input-container>
<div layout="row">
<span flex></span>
<md-button class="md-primary md-raised" ng-click="login.login(username, password)">Login</md-button>
<md-button ng-click="login.register()">Register</md-button>
</div>
</form>
</md-card>
</div>


I've already fiddled with
flexboxes
and
layout-align
. Using the
layout-align
attribute of the card allowed me to center it horizontally but not vertically. Another question's answer--pertaining to
divs
only--said to style the child with
display: inline-block;
and the parent with
text-align: center;
, but this only centered the card horizontally and aligned the textfields and text to the center of the card as well (I definitely don't want that). Any help is greatly appreciated as I am very new to CSS and web-programming.

Answer

You need both a layout and layout-align attribute on your containing div element, so:

layout="row" layout-align="center center"

See example here - http://codepen.io/parky128/pen/PGxGrX

See the examples in the docs - https://material.angularjs.org/latest/layout/alignment

Comments