nur*_*urp 10 html angularjs material-design angularjs-material
我希望这段代码能够纵向和横向集中内容.它就是这样,但是一旦我使窗口变小(移动尺寸),文本的(h1和p)对齐就会变为左边.
我错过了非常基本的东西吗？我可以说它text-center有效,但我不想自己添加任何CSS样式.
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>对我来说，它的工作方式就像在最新版本的 Chrome 中应该的那样。我想说这是一个浏览器兼容性问题。Angular Material 仍然非常新，因此存在大量错误。
不久前，我在我的网站中添加了角度材料，并使用了大量的 css hack（有些错误，有些没有）。
显然，如果可以的话，请尝试使用本机的东西，但是在它得到修复之前，像小的 css hack 应该没问题。如果问题仍然存在，请告诉我！