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

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

for those who have problems getting this example to work in angular2 you might need to add the ::ng-deep selector to the css for the figure

<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/ was deprecated

Another alternative with flex-layout (and using the latest 'mat-' prefix):

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

Related