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

Posted 2023-03-06

【中文标题】Angular Material中的中心对齐网格列表

【英文标题】：Center aligned grid list in Angular Material

【发布时间】：2017-05-02 21:56:02

【问题描述】：

我想在 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- 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。

【问题讨论】：

你能做个小提琴吗

请检查这个小提琴：

jsfiddle.net/Vipin/d8zsoed8/13

【参考方案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>

希望这会有所帮助！

【讨论】：

@VinuDeveloper Angular Material 正在大量覆盖样式，但我仍然更新了小提琴代码并根据您的要求进行制作 - jsfiddle.net/d8zsoed8/16 。如果这对您有所帮助，也不要忘记接受这个作为您的答案。