text-align in md-grid-tile (угловой материал) не работает

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> 

Я хочу, чтобы выровнять текст, как это:

what I want to

но выравнивания текста в мкр-грид-плитка не работает :(

как я могу это сделать?

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

Я сделал это!

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

для тех, у кого есть проблемы с получением этот пример для работы в angular2 , возможно, вам потребуется добавить :: нг-глубоко селектор в CSS для фигуры

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

CSS

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

* Последнее обновление/глубокий/к :: нг-глубоко, потому что/глубоко/осуждался