Question

角度材料中的文本对齐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>

我想对齐这样的文字：

what I want to

但md-grid-tile中的text-align不起作用：（

我该怎么办？

Answer 1

您可以在span内的文字周围添加div或md-grid-tile标记：

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

然后设置样式：

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

Answer 2

对于那些让这个例子在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;
 }

* updated / deep / to :: ng-deep因为/ deep /已弃用

Answer 3

另一种使用flex-layout的替代方法（并使用最新的'mat-'前缀）：

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

Answer 4

我做到了！

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

将div内的mat-grid-tile个元素定位为宽度为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（角度材质）中的text-align不起作用

5 个答案: