web-dev-qa-db-fra.com

Matériau angulaire layout-align = "center center" ne fonctionne pas

J'essaie d'utiliser le layout-align = "center center" qui devrait aligner le contenu au centre verticalement et horizontalement. Mais il ne s'agit que d'aligner le contenu horizontalement et non verticalement.

Voici le plnkr link du code que j'essaie.

<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

La raison pour laquelle il ne le centre pas verticalement est que votre div contenant l'attribut layout-align n'a pas de hauteur.

Essayez quelque chose comme

<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

Le centrage vertical de Flexbox fonctionne bien avec la définition de la hauteur pour l'élément parent:

<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

Juste utiliser 

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

sur votre div parent

0
smedasn