How to center a md-content tag in material

Question

How do I center md-content, I used this layout-align but it's not working:

        <md-content flex="75" layout-padding layout-align="center center">
           <p align="justify">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
        </md-content>

This may help: https://stackoverflow.com/a/36392457/1791913 – FAISAL Jul 28 '17 at 11:05 — FAISAL, Jul 28 '17 at 11:05
this is Angular or AngularJS question?? – Pankaj Parkar Jul 28 '17 at 11:11 — Pankaj Parkar, Jul 28 '17 at 11:11

score 2 · Accepted Answer · answered Jul 28 '17 at 11:09

Add layout-align="center center" and that should work,

DEMO

// Code goes here

angular.module('webapp', ['ngMaterial'])
  .controller('AppCtrl', function($scope) {
   
  
  });

<!DOCTYPE html>
<html ng-app="webapp">

<head>
  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.min.css">
  <link rel="stylesheet" href="style.css" />

  <!-- Angular Material Dependencies -->
  <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-animate.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-aria.min.js"></script>
  <!-- Use dev version of Angular Material -->
  <script src="https://rawgit.com/angular/bower-material/master/angular-material.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
 <md-content class="md-padding" layout-xs="column" layout="row" layout-align="center center">
    <div flex-xs flex-gt-xs="40" layout="column" layout-align="center center">
        <md-card class="card-40-center">
            <md-card-title>
                <md-card-title-text>
                    <span class="md-headline">Sign Up</span>
                </md-card-title-text>
            </md-card-title>    
            </md-card>
    </div>
</md-content>
  <div layout="column" layout-fill flex style="max-height:100%">
  </div>
</body>

</html>

score 1 · Answer 2 · answered Aug 05 '17 at 17:56

1

Point is layout-align will not work without specifying layout='row'or layout='column' and make you have enough flex to see the space in between. Even writing just layout would default to row.

answered Aug 05 '17 at 17:56

raga

899
10
14

How to center a md-content tag in material

2 Answers2