Angular Material中的中心对齐网格列表

Question

我想在 Angular Material 中获得一个中心对齐的网格列表。

这是我的代码：

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

使用display: flex 使您的父级（即md-grid-list）成为一个弹性容器，并使用justify-content: center 将其子级（即md-grid-tile）水平居中对齐。喜欢：

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

我使用div's 而不是常规的md- 类型的组件进行演示：

• md-grid-list 等价于.list
• md-grid-tile 等价于.tile

看看下面的示例 sn-p（根据您的要求更新了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>

希望这会有所帮助！