如何在材料中居中 md-content 标签答案

【问题标题】：How to center a md-content tag in material如何在材料中居中 md-content 标签
【发布时间】：2018-01-04 09:55:26
【问题描述】：

如何使 md-content 居中，我使用了这个 layout-align 但它不起作用：

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

【问题讨论】：

这可能会有所帮助：stackoverflow.com/a/36392457/1791913
这是 Angular 还是 AngularJS 的问题？？

标签： angularjs material-design angular-material

【解决方案1】：

如果不指定 layout='row' 或 layout='column' 并让您有足够的 flex 来查看两者之间的空间，点是 layout-align 将不起作用。即使只写layout 也会默认为行。

【讨论】：

【解决方案2】：

添加 layout-align="center center" 就可以了，

演示

// 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>

【讨论】：