Angular Material layout-align center doesn't affect text in small mode

Question

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>

No I couldn't. I used style="text-align: center" . I think angular-material decides whether to center the text or not. If the text is long it makes it left-aligned. And centered if short. You can see it yourself with fake content. — nurp, Jul 10 '15 at 12:26

score 1 · Answer 1 · answered Sep 20 '16 at 13:47

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

score 0 · Answer 2 · answered Jun 19 '15 at 22:33

For me it's working like is should in the newest version of Chrome. I would say this is a browser compatibility issue. Angular Material has a good amount of bugs in it as it is still very new.

I've added angular material into my site not too long ago and did a used a decent amount of css hacks (some bugs, some not).

Obviously try to use the native things if you can, but a small css hack like should be okay until it gets fixed. Let me know if the problem still persists!

score 0 · Answer 3 · answered Jan 12 '16 at 14:31

0

when same thing happened for me I compared with the example on layout description

It turns out I was using a "flex" element as children. That breaks the center alignment. Remove it.

answered Jan 12 '16 at 14:31

pseudozach

398
6
14

Angular Material layout-align center doesn't affect text in small mode

3 Answers3