angularjs - How to center a md-content tag in material -
how center md-content, used layout-align it's not working:
<md-content flex="75" layout-padding layout-align="center center"> <p align="justify">contrary popular belief, lorem ipsum not random text. has roots in piece of classical latin literature 45 bc, making on 2000 years old.</p> </md-content>
add layout-align="center center"
, 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>
Comments
Post a Comment