md-grid-tile(角度材质)中的text-align不起作用

Question

角度材料中的text-align 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中的文本对齐不起作用:(

我该怎么做？

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 /已弃用