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

Question

I have a grid consisting of maps made of angular material. The problem is that the cards have a fixed size, and right after the wrap there is a place on the right. I want to eliminate it by centering md-content. But it has line width, so I can't center correctly. How can I fix it (i.e. make the width md-contentequal to the actual width of the content)? Thank.

<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>

Answer 1

Try setting the border of the content to adjust its position.

Answer 2

layout-align="center" md-content, - CodePen

, , "" , , , .

<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];
});