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.

Answer 1

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