Question

我希望这段代码能够纵向和横向集中内容。它就是这样，但是只要我将窗口缩小（移动大小），文本（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>

Answer 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;
}

Answer 2

对我来说，它的工作方式与最新版Chrome相同。我想说这是浏览器兼容性问题。 Angular Material中有很多bug，因为它仍然很新。

我不久前在我的网站上添加了角度材料，并使用了大量的css hacks（有些bug，有些没有）。

如果可以的话，显然尝试使用本机的东西，但是一个小的css hack应该没问题，直到它被修复。如果问题仍然存在，请告诉我们！

Answer 3

当我发生同样的事情时，我与layout description

上的例子进行了比较

事实证明我正在使用＆＃34; flex＆＃34;作为孩子的元素。这打破了中心对齐。删除它。

角度材质布局 - 对齐中心不会影响小模式下的文本

3 个答案: