javascript - Align Vertically and Horizontally with Angular Material

I'm following the documentation on .

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

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

Share Improve this question edited May 5, 2016 at 17:43 vikingben 1,6522 gold badges24 silver badges37 bronze badges asked May 5, 2016 at 10:24 Andrey Saleba 2,1974 gold badges22 silver badges28 bronze badges

Add a comment |

2 Answers 2

Sorted by: Reset to default 8

<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) {

}]);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Align Vertically and Horizontally with Angular Material - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)