So zentrieren Sie `layout =" row "` div?

Question

Ich habe ein Raster aus Karten aus dem eckigen Material. Das Problem ist: Die Karten haben eine feste Größe, und unmittelbar nach dem Einschlagen gibt es rechts ein Leerzeichen. Ich möchte es beseitigen, indem ich das md-content zentriere. Aber es hat die Breite der Reihe, also kann ich keine Zentrierung richtig machen. Wie kann ich es beheben (d. H. Die Breite von md-content der tatsächlichen Inhaltsbreite anpassen)? Vielen Dank.

<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

Versuchen Sie, die Marge des Inhalts setzen ihre Position

Answer 2

einstellen Wenn Sie layout-align="center" zum md-content hinzufügen wird es den Inhalt Zentrum - CodePen

Beachten Sie jedoch, dass, wenn die untere Reihe hat "less" cards sie sind auch zentriert, was vielleicht nicht das ist was du willst.

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