角度材质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内的项目？

Answer 1

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

CSS:

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

Plunker演示

Answer 2

经过大量的血泪之后，我能够设计角度材质网格的第一列，而不会影响页面上的其他网格。下面的样式将仅在此中将人员姓名左对齐并垂直居中<mat-grid-list>。

角材质网格：

<mat-grid-list cols="4" rowHeight="4:1">
    <mat-grid-tile colspan="2">
        <div class="leftVerticalAlign">
        Persons Name
        </div>
    </mat-grid-tile>
    <mat-grid-tile>Persons Phone</mat-grid-tile>
    <mat-grid-tile [style.border-left]="'12px solid gray'">Persons Email</mat-grid-tile>
</mat-grid-list>

难以捉摸的CSS：

.leftVerticalAlign {
    left: 1em;    
    position: absolute;  
    top: 50%;
    transform: translate(0px, -50%);
    margin: 0;
}

我border-left在那里添加了一个额外的样式作为应用样式的另一种方式，但它仅限于我注意到的样式。

有关水平和垂直对齐的更多信息，请查看w3schools

他们在这件事上救了我的命。

Answer 3

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

HTML：

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

CSS：

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