10

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>

4

3 回答 3

1

尝试这个

<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;
}
于 2016-09-20T13:47:07.233 回答
0

对我来说，它的工作方式就像在最新版本的 Chrome 中一样。我会说这是浏览器兼容性问题。Angular Material 中存在大量错误，因为它仍然很新。

不久前，我在我的网站中添加了有角度的材料，并使用了大量的 css hack（一些错误，一些没有）。

显然，如果可以的话，尝试使用本机的东西，但是在它得到修复之前，一个小的 css hack 应该没问题。让我知道问题是否仍然存在！

于 2015-06-19T22:33:17.337 回答
0

当我发生同样的事情时，我与布局描述的示例进行了比较

事实证明，我使用的是“flex”元素作为孩子。这打破了中心对齐。去掉它。

于 2016-01-12T14:31:08.950 回答