Geek Answers Handbook

Angular layout material-align = "center of center" does not work

I am trying to use the center layout-align = "center center", which should align the content in the center both vertically and horizontally. But it only aligns the content horizontally, not vertically.

Here is the plnkr link of the code I'm trying to do.

<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>
+8
html angularjs css material-design angular-material
source share
3 answers

The reason it is not centered vertically is because your div containing the layout-align attribute has no height.

Try something like

 <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>
+17
source share

Flexbox vertical centering works well with determining the height for the 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>
+2
source share

Just use

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

on parent div

0
source share

More articles:


All Articles