Menu
I'm trying to use the layout-align = "center center" which should align the content at center both vertically and horizontally. But it's only aligning the content horizontally and not vertically.
Here's the plnkr link of the code I'm trying.
<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>
479
The reason why it is not centering it vertically is because your div containing the layout-align attribute does not have a 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>
Just use
fxLayout="row" fxLayoutAlign="center center" style="height: 100vh; width: 100vh"
on your parent div
26
Flexbox vertical centering works well with defining height for the parent element:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
