角度材質2：如何設計md-grid-tile？

<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內部的項目，使其與默認中心對齊方式不同？角度材質2：如何設計md-grid-tile？

來源

2017-07-30 Aakash Uniyal

您可以使用::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

來源

2017-07-30 18:44:22 Nehal

是啊，但這個食堂等場所使用網磚。 – Vato

是的，我後來也注意到了。但我發現另一個修復。可能，過一段時間後發佈 –

這是唯一可靠的解決方案，我發現至今。！重要的不起作用。 :: 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; 
    }

來源

2018-02-12 16:31:02 Vato

角度材質2：如何設計md-grid-tile？

回答

相關問題