2017-07-28 99 views
0

我如何中心MD-内容,我用这个布局保持一致,但它不工作:如何居中MD-内容标签材料

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

这可能会帮助:https://stackoverflow.com/a/36392457/1791913 – Faisal

+0

这是角或AngularJS问题? –

回答

2

添加layout-align="center center"并应工作,

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>

0

点是layout-align不会没有指定layout='row'layout='column'工作,让你有足够的flex看到之间的空间。即使只写layout也会默认为行。