Eckig Material Layout-Align-Center hat keinen Einfluss auf Text im kleinen Modus

Ich erwarte, dass dieser Code den Inhalt sowohl vertikal als auch horizontal zentriert. Es tut das, aber sobald ich das Fenster kleiner (mobile Größe), ändert die Text (h1 und p) Ausrichtung nach links.Eckig Material Layout-Align-Center hat keinen Einfluss auf Text im kleinen Modus

Fehle ich etwas sehr Grundlegendes? Ich kann sagen text-center dann funktioniert es, aber ich möchte keine CSS-Stile selbst hinzufügen.

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>

Quelle

2015-06-19 nurp

Ich habe das gleiche Problem. Hast du jemals die Lösung gefunden? –

Nein, konnte ich nicht. Ich benutzte style = "text-align: center". Ich denke, dass eckiges Material entscheidet, ob der Text zentriert werden soll oder nicht. Wenn der Text lang ist, wird er linksbündig gemacht. Und zentriert wenn kurz. Sie können es selbst mit gefälschten Inhalten sehen. – nurp

Für mich arbeitet es wird in der neuesten Version von Chrome sollte. Ich würde sagen, dass dies ein Browserkompatibilitätsproblem ist. Angular Material hat eine ganze Menge Bugs, da es noch sehr neu ist.

Ich habe eckiges Material in meine Seite vor nicht allzu langer Zeit hinzugefügt und eine anständige Menge von css Hacks (einige Bugs, einige nicht) verwendet.

Offensichtlich versuchen Sie, die nativen Dinge zu verwenden, wenn Sie können, aber ein kleiner css Hack wie sollte in Ordnung sein, bis es behoben wird. Lassen Sie mich wissen, ob das Problem weiterhin besteht!

Quelle

2015-06-19 22:33:17

wenn gleiche Sache für mich passiert vergleichen ich mit dem Beispiel auf layout description

Es stellt sich heraus, dass ich als Kinder ein „flex“ Element verwendet. Das bricht die zentrierte Ausrichtung. Entfernen Sie es.

Quelle

2016-01-12 14:31:08 pseudozach

dieses

<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 Versuchen:

.btn{ 
    width: 350px; 
}

Quelle

2016-09-20 13:47:07 dev

Eckig Material Layout-Align-Center hat keinen Einfluss auf Text im kleinen Modus

Antwort

Verwandte Themen