web-dev-qa-db-ja.com

Angular material layout-align = "center center" not working

Layout-align = "center center"を使用しようとしています。これは、コンテンツを垂直方向と水平方向の両方で中央に揃える必要があります。ただし、コンテンツを垂直方向ではなく水平方向に揃えるだけです。

ここにplnkr link しようとしているコードがあります。

<body ng-app="app" ng-controller="appCtrl">
<md-toolbar>
<div class="md-toolbar-tools">
  <h2 flex>Hello Angular-material!</h2>
</div>
</md-toolbar>
<div class="flexbox-parent">
  <div layout="row" layout-align="center center">
   <div flex="15">First line</div>
   <div flex="15">Second line</div>
  </div>
</div>
</body>
htmlcssangularjsmaterial-designangular-material
9
Prabhdeep

垂直方向に中央揃えしないのは、layout-align属性を含むdivに高さが設定されていないためです。

のようなものを試してください

<div class="flexbox-parent">
  <div layout="row" layout-align="center center" style="min-height: 500px">
   <div flex="15">First line</div>
   <div flex="15">Second line</div>
  </div>
</div>
24
Brady Liles

Flexboxの垂直方向の中央揃えは、親要素の高さを定義するとうまく機能します。

<div class="flexbox-parent">
  <div layout="row" layout-align="center center"  style="height: 100vh">
   <div flex="15">First line</div>
   <div flex="15">Second line</div>
  </div>
</div>
3
Nikhil Raj A

使うだけ

fxLayout="row" fxLayoutAlign="center center" style="height: 100vh; width: 100vh"

親のdivで

0
smedasn