CODEWITHSUNDEEP
cssangularjstypescriptangular-materialmaterial-design
Millenial2020
Millenial2020

Reputation: 2921

Angular Material how to align layout center

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

Upvotes: 0

Views: 22531

Answers (1)

Adrian Bratu
Adrian Bratu

Reputation: 508

<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

Upvotes: 2

Related Questions