Align text to center inside Snackbar (Angular Material)

Question

Hey how can I align text inside SnackBar to be center?

this is my code and it doesn't work:

import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class MaterialService {

  constructor(public snackBar: MatSnackBar) { }

openSnackBar(message:string){

let config = new MatSnackBarConfig();
config.panelClass = 'text-align:center';

  this.snackBar.open(message);
}

}

thanks you :)

Answer 1

Simply add this in your style.css (or any global css, in my case I put it in my app.component.scss)

margin:auto; will center the span tag inside the snackBar

text-align:center; will center the text inside the span

simple-snack-bar span {
  margin:auto;
  text-align: center;
}

Settings like this will apply to all your SnackBars.

Answer 2

For angular 7 w/material, I use this in global style.css:

.mat-simple-snackbar span {
  margin: auto;
  text-align: center;
}