Menu
I expect this code to center the content both vertically and horizontally.
It does that, but as soon as I make the window smaller (mobile size), the text's (h1 and p) alignment changes to the left.
Am I missing something very basic? I can say text-center then it works, but I don't want to add any CSS styles myself.
angular.module('app', ['ngMdIcons', 'ngMaterial']);<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://login.persona.org/include.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script>
</head>
<body layout="column" ng-app="app">
<div layout="row" flex layout-align="center center">
<div layout="column" layout-align="center">
<h1>Welcome to Dreamland!</h1>
<md-button class="md-hue-2 md-raised md-primary" >
<h1 class="md-display-1">Login</h1>
</md-button>
<p class="md-caption">This web site uses your membership with the given email address.</p>
</div>
</div>
</body>
</html>
578
Try this
<div layout="column" layout-align="center center">
<h1>Welcome to Dreamland!</h1>
<md-button class="md-hue-2 md-raised md-primary btn">
<h1 class="md-display-1">Login</h1>
</md-button>
<p class="md-caption">This web site uses your membership with the given email address.</p>
</div>
CSS:
.btn{
width: 350px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
