mdl-cell--middle didn't work

[samuelcarreira]

How can I align the responsive grid components? When I resize the browser size the cell always float to the left. There is any alternative?

`

  <div class="mdl-grid ">

    <div class="mdl-cell mdl-cell--3-col mdl-cell--middle" style="background-color: white; ">Content</div>

    <div class="mdl-cell mdl-cell--3-col mdl-cell--middle" style="background-color: red; ">Content</div>

    <div class="mdl-cell mdl-cell--3-col mdl-cell--middle" style="background-color: blue; ">Content</div>

    <div class="mdl-cell mdl-cell--3-col mdl-cell--middle" style="background-color: green;">Content</div>

  </div>
</div>`

PS: I've tried to use a outer div to center the content without sucess.

[Garbee]

justify-content: center on the mdl-grid element.

Looks like we need to do some work with centering and the grid...

[samuelcarreira]

Yea, I think that is a common problem with all the grid frameworks (I tested with foudation). So for now I will try to fix that flex behaviour with some media queries margin : before or with javascript

[stephengeorgewest-navitaire]

It looks like the resized one is shrunken down to 'tablet' width, which has 8 column wide grids, not the 12 for 'desktop' mode. The mdl-cell-3-col will take up 6 of those 8 columns, leaving a 2 column space on the right. If you wanted to have the grid full width on tablet you could use mdl-cell--4-col-tablet over two rows, or mdl-cell--2-col-tablet for one row. 'Phone' grids are 4 wide, so, mdl-cell--4-col-phone, etc.

From my fiddling with mdl, mdl-cell--middle is for vertical align, to complement mdl-cell--top, and mdl-cell--bottom.

Is this not the intended behavior?

[dsomel21]

Should the mdl-cell--middle not be on the outer div? I am not sure if that's what you mean by, "I've tried to use a outer div to center the content without sucess."