角度材质中心对齐的网格列表

Question

我想在角度材质中获得中心对齐的网格列表。

这是我的代码：

<md-content layout-padding>
    <md-grid-list md-cols-gt-md="10" md-cols-md="8" md-cols-sm="6" md-cols="4" md-cols-xs="3"  md-row-height-gt-md="1:1" md-row-height="1:1" md-row-height-xs="110px" md-gutter-gt-md="10px" md-gutter="2px">
      <md-grid-tile ng-repeat="item in homeTilesNavigation">
          <div class="compas-home-text">{{item.name}}</div>
      </md-grid-tile>
    </md-grid-list>
  </md-content>

我得到的结果如下：

但我想这样：

我想让相同的网格列表居中对齐。 这是fiddle code。

Answer 1

您可以使用 CSS Flexbox 。

使用md-grid-list＆amp;使您的父母（即display: flex）成为灵活容器使用justify-content: center将其子项（即md-grid-tile）水平对齐。像：

md-grid-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

我使用div代替常规md-类型组件进行演示：

• md-grid-list 相当于.list
• md-grid-tile 相当于.tile

请查看下面的示例代码段（根据您的要求更新fiddle）：

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.tile {
  width: 100px;
  height: 100px;
  border: 1px solid #777;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

<div class="list">
  <div class="tile">
    <div class="compas-home-text">Grid Title</div>
  </div>

  <div class="tile">
    <div class="compas-home-text">Grid Title</div>
  </div>

  <div class="tile">
    <div class="compas-home-text">Grid Title</div>
  </div>

  <div class="tile">
    <div class="compas-home-text">Grid Title</div>
  </div>

  <div class="tile">
    <div class="compas-home-text">Grid Title</div>
  </div>

  <div class="tile">
    <div class="compas-home-text">Grid Title</div>
  </div>
</div>

希望这有帮助！