css - 将文本对齐到 Snackbar 内的中心( Angular Material )

Question

嘿，我怎样才能将 SnackBar 中的文本居中对齐？

这是我的代码，它不起作用:

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

}

谢谢你:)

Answer 1

只需将它添加到您的 style.css(或任何全局 css，在我的例子中，我将它放在我的 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;
}

这样的设置将应用于您的所有 SnackBar。