角材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 demo

Answer 2

これは私がこれまでに見つかっただけで信頼性の高いソリューションです。 ！大事に働かなかった。 :: ng-deepはメインコードを壊します。 divを使用し、CSSで絶対値を使用する場合は、必要な方法で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; 
    }