Angular Material 2：如何设置 md-grid-tile 的样式？

Question

 <md-grid-list cols="3" >
  <md-grid-tile style="overflow : scroll;align-items: initial;">

    <app-general style="padding-left : 1em;" ></app-general>

  </md-grid-tile>
  <md-grid-tile class="dummy" style="overflow : scroll;align-items: initial;">
    <app-slab2g style="padding-left : 1em;" > </app-slab2g>

  </md-grid-tile>

  <md-grid-tile style="overflow : scroll;align-items: initial;">
    <app-slab3g style="padding-left : 1em;" > </app-slab3g>

  </md-grid-tile>
</md-grid-list>

除了默认的中心对齐方式之外，如何以不同方式对齐 md-grid-tile 内的项目？

原文由 Aakash Uniyal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 ::ng-deep 覆盖 md-grid-tile 的默认 css。

CSS:

 ::ng-deep md-grid-tile.mat-grid-tile .mat-figure {
    align-items: initial;  /*vertical alignment*/
    justify-content: initial;  /*horizontal alignment*/
}

Plunker 演示

原文由 Nehal 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

为避免弄乱您的整个项目，请在组件中使用：

HTML:

<mat-grid-tile [colspan]="8" class="script-menu"> </mat-grid-tile>

CSS：

 .script-menu >::ng-deep .mat-figure{
    justify-content: flex-start;
}

原文由 João Ignacio 发布，翻译遵循 CC BY-SA 4.0 许可协议