md-grid-tile (Angular Material) 中的文本对齐不起作用

Question

text-align 在 Angular Material <md-grid-tile> 中不起作用。

<md-grid-tile>{{video.created}}</md-grid-tile>
<md-grid-tile>{{video.code</md-grid-tile>

<md-grid-tile style="text-align: left;">
   {{ video.title }}
</md-grid-tile>

<md-grid-tile>{{video.playtime}}</md-grid-tile>

我想这样对齐文本：

但是 <md-grid-tile> 中的 text-align 没用 :(

我该怎么做？

Answer 1

我做到了！

<md-grid-tile>{{video.created}}</md-grid-tile>
<md-grid-tile>{{video.code</md-grid-tile>

<md-grid-tile style="text-align: left;" class="video-title">
    {{ video.title }}
</md-grid-tile>

<md-grid-tile>{{video.playtime}}</md-grid-tile>

css

.video-title > figure {
    justify-content: flex-start !important;
}

Answer 2

您可以简单地在 md-grid-tile:

内的文本周围放置一个 span 或 div 标签

<md-grid-tile>
    <div class="text-inside-grid">{{ video.title }}</div>
</md-grid-tile>

然后设置样式：

.text-inside-grid {
  position: absolute;
  left: 5px;
}

Answer 3

对于那些无法让这个例子在 angular2 中工作的人您可能需要将 ::ng-deep 选择器添加到图

的 css

<md-grid-tile class="video-title">
    {{ video.title }}
</md-grid-tile>

css

 .video-title > ::ng-deep figure {
     justify-content: flex-start !important;
 }

*将 /deep/ 更新为 ::ng-deep 因为 /deep/ 已被弃用

Answer 4

使用 flex-layout 的另一种选择（并使用最新的 'mat-' 前缀）：

<mat-grid-tile>
    <div fxFlex fxLayoutAlign="start center">{{ video.title }}</div>
</mat-grid-tile>

Answer 5

mat-grid-tile 内的目标 div 个元素，宽度为 100%。

my.component.scss

mat-grid-tile div {
  width: 100%;
  text-align: left;
}

my.component.html

<mat-grid-list cols="12">
  <mat-grid-tile colspan="4">
    <img [src]="hero.avatarUrl" i18n-alt alt="Hero avatar" />
  </mat-grid-tile>

  <mat-grid-tile colspan="8">
    <div>
      <h1>
        {{ hero.firstName }}
        {{ hero.lastName }}
      </h1>
    </div>
  </mat-grid-tile>
</mat-grid-list>

md-grid-tile (Angular Material) 中的文本对齐不起作用

text-align in md-grid-tile (Angular Material) doesn't work

text-align

angular-material