javascript - 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 和使用 justify-content: center 让你的父级(即 md-grid-list)成为一个 flex 容器将其子项(即 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>

希望这对您有所帮助!