web-dev-qa-db-ja.com

Angularマテリアルレイアウト-中央揃えはスモールモードのテキストに影響しません

このコードは、コンテンツを垂直方向と水平方向の両方の中央に配置することを期待しています。それはそれを行いますが、ウィンドウを小さくすると（モバイルサイズ）、テキストの（_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>_
htmlangularjsmaterial-designangularjs-material
10
nurp

これを試して

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

私にとっては、Chromeの最新バージョンのように機能しています。これはブラウザの互換性の問題だと思います。 Angularマテリアルはまだ非常に新しいため、かなりの量のバグが含まれています。

私はangularの資料を私のサイトに少し前に追加し、かなりの量のcssハックを使用しました（いくつかのバグ、いくつかはそうではありません）。

可能であれば、明らかにネイティブのものを使用してみてください。ただし、修正されるまでは、のような小さなcssハックで問題ありません。それでも問題が解決しない場合はお知らせください。

0
Daniel Jamrozik

同じことが起こったとき、私は レイアウトの説明 の例と比較しました

私は子供として「フレックス」要素を使用していたことがわかりました。それは中心の配置を壊します。それを除く。

0
pseudozach