How to center `layout="row"` div?

Question

I have a grid made up by cards from the angular material. The problem is: the cards have fixed size, and immediately after the wrapping there is a space on the right. I want to eliminate it, by centering the md-content. But it has the width of the row, so I can't make any centering properly. How can I fix it (i.e. make the width of the md-content equal to actual content width)? Thank you.

<md-content layout="row" layout-wrap>
  <md-card ng-repeat="channel in $ctrl.channels" ui-sref="" md-ink-ripple>
    <div layout-align="center" layout='row' style="width: 160px; height: 160px">
      <img ng-src="{{channel.logo_url}}" alt="{{channel.name}}" style="width: 100%;" />
    </div>
    <footer style="padding: 2px;" layout-align="center">
      <h3>{{channel.name}}</h3>
    </footer>
  </md-card>
</md-content>

that makes the element that has the property as big as its contents, for reference — vladdobra, Nov 01 '16 at 00:38
@vladdobra Did try this, with just inline containers like `span` too, no luck. — Georgy, Nov 01 '16 at 07:56

score 0 · Answer 1 · answered Oct 31 '16 at 22:35

0

Try to set the margin of the content to adjust its position

answered Oct 31 '16 at 22:35

Max'Winner

1

That wouldn't be centering, just offsetting. Doesn't solve the problem, more than this, make the content area smaller. – Georgy Oct 31 '16 at 22:38
Yes I see. I have not well anderstand the problem – Max'Winner Nov 01 '16 at 22:43

score 0 · Answer 2 · answered Nov 01 '16 at 09:18

0

If you add layout-align="center" to the md-content it will centre the content - CodePen

Note, however, that if the bottom row has "less" cards they are centred too, which may not be what you want.

Markup

<div ng-controller="AppCtrl as ctrl" ng-cloak="" ng-app="MyApp">
  <md-content layout="row" layout-wrap layout-align="center">
    <md-card ng-repeat="channel in ctrl.channels" ui-sref="" md-ink-ripple>
      <div layout-align="center" layout='row' style="width: 160px; height: 160px">
        <img ng-src="{{channel.logo_url}}" alt="{{channel.name}}" style="width: 100%;" />
      </div>
      <footer style="padding: 2px;" layout-align="center">
        <h3>{{channel.name}}</h3>
      </footer>
    </md-card>
  </md-content>
</div>

JS

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function() {
  this.channels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
});

answered Nov 01 '16 at 09:18

camden_kid

12,591
11
52
88

"Note, however, that if the bottom row has "less" cards they are centred too, which may not be what you want." - yeah, unfortunately. It looks like the problem is with the layout-wrap, more specifically with the state after the wrap, because the container is content-wise wide, before wrapping, after - it is 100%. This answer: http://stackoverflow.com/a/34816625/4753661 could be useful here, though the grid isn't centered well at the last row either :( – Georgy Nov 01 '16 at 09:26
@Georgy If your divs have a fixed width you may want to use Grid List - https://material.angularjs.org/latest/demo/gridList – camden_kid Nov 01 '16 at 10:06
Isn't it for the responsive tiles? They specify colspan, rowspan and ratio, not width and height, as far as I understand. – Georgy Nov 01 '16 at 10:56

How to center `layout="row"` div?

2 Answers2