Text-align in md-grid-tile (angular material) not working

Question

text-align in angular md-grid-tile material does not 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 the text as follows:

what I want

but text-align in md-grid-tile does not work :(

How can i do this?

Answer 1

You can 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 configure it:

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

Answer 2

for those who have problems getting this example to work in angular2, you may need to add a :: ng-deep selector to css for drawing

 <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 because / deep / is deprecated

Answer 3

I did it!

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