Question

我如何集中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>

Answer 1

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

Answer 2

如果没有指定layout-align或layout='row'，则点layout='column'将无效，并让您有足够的flex来查看其间的空格。即使只写layout也会默认为行。

如何在材质中居中md-content标签

2 个答案: