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

Question

text-align in Angular Material <md-grid-tile> doesn't work.

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

I want to align text like this:

but text-align in <md-grid-tile> didn't work :(

How can I do it?

Answer 1

You could simply put a span or div tag around your text inside md-grid-tile:

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

and then style it:

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