Html 角度材质2：如何设置md栅格瓷砖的样式？

如何以不同于默认中心对齐方式的方式对齐md栅格平铺内的项目

您可以使用

：：ng deep

覆盖

md grid tile

的默认css

css:

---

这是迄今为止我找到的唯一可靠的解决方案！重要提示：不起作用：ng deep会弄乱主代码。如果在css中使用div和absolute，则可以按所需方式对齐div

html

html

---

这将是有效的：）

在经历了大量的血泪之后，我能够在不影响页面上其他网格的情况下设计出角度材质网格的第一列。以下样式将仅在此

中左对齐并垂直居中显示人员姓名

角度材质栅格：

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

我在那里添加了一个额外的

左边框

样式，作为应用样式的另一种方式，但它仅限于我注意到的样式

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

---

这一次他们救了我的命。

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

HTML:

CSS:

，不要使用它。
基于，默认情况下，您不能覆盖作为模板中其他组件子级的样式影响元素。
一种做法是：

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

---

是的，但是这会弄乱你使用网格瓷砖的其他地方。是的，我后来也注意到了。但我也找到了另一个解决办法。可能，在某些时候将样式全局设置在styles.css/styles.sccs文件中后将其发布，如下所示：

mat grid tile.yourClass{overflow:auto}

，因为

：：ng deep

已被弃用：尝试使用：host，将作用域保留为组件本身，而不将ng deep定义的样式泄漏到组件之外好的建议@阿卡舒尼亚尔

<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>

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

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

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

<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>

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

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

.your-component .mat-grid-tile .mat-figure {
  justify-content: flex-start;
}