Angular Material how to align layout center

0
votes

I have this straight out of angular material website, because im having a lot of trouble with angular material flex layout.

According to the doc about layout container Items arranged in a row. max-height = 100% and max-width is the width of the items in the container.

I tried the example provide at the doc page

    <div ng-app="myapp" ng-cloak>

<div layout="row" layout-align="center center">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

</div>

my content is suppose to align vertically and horizontally at the center. but instead my content is aligning horizontally but not vertically.

I have the code example here

1
cssangularjstypescriptangular-materialmaterial-design
The problem is the outer div has no fix width and height give it 100% width and height. - kushal Baldev

1 Answers

2
votes
<div layout-fill ng-app="myapp" ng-cloak>

<div layout="row" layout-fill layout-align="center center">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

</div>

please apply layout-fill on the containers that require to take up all the space