角度材质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覆盖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 demo

Answer 2

这是我到目前为止找到的唯一可靠的解决方案。 ！重要没有用。 :: ng-deep搞砸了主要代码。如果你使用div并在css中使用absolute，你可以按照你想要的方式对齐div。

HTML

<mat-grid-tile *ngFor="let project of projects" 
        [style.background]="project.Color" (click)="openDialog(project)" >
        <div fxLayoutWrap fxLayoutAlign="start center" class="footer">

        </div>
</mat-grid-tile>

CSS

.footer {
    position: absolute;
    left: 5px;
    bottom: 5px;
  }

Answer 3

HTML

<mat-grid-tile class="title-tem">
  <div class="item-content">
    hi
  </div>
</mat-grid-tile>

CSS

 .title-tem >::ng-deep .mat-figure{
  align-items: flex-start;
  justify-content: flex-start;
}

那将是工作:)

Answer 4

经过大量的血与泪，我能够设置角度材质网格的第一列样式，而不会影响页面上的其他网格。下面的样式将仅在此<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

他们救了我的生命。