Css 将文本对齐到Snackbar内部的中心（角度材质）

嘿，我怎样才能使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);
}

}

谢谢：）

试试这个

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

@Injectable({
  providedIn: 'root'
})
export class MaterialService {
 horizontalPosition: MatSnackBarHorizontalPosition = 'center';
 verticalPosition: MatSnackBarVerticalPosition = 'top';

  constructor(public snackBar: MatSnackBar) { }

openSnackBar(message:string){

      let config = new MatSnackBarConfig();
      config.verticalPosition = this.verticalPosition;
      config.horizontalPosition = this.horizontalPosition;
      this.snackBar.open(message);
}

参考：

---

示例：

MatsnakBarConfig的

panelClass

属性接受一个CSS类，您可以在主应用程序的

样式中定义该类。CSS

：

openSnackBar（消息：string）{
设config=new matsnakbarconfig（）；
config.panelClass='中央弹簧条'；
此.snackBar.open（消息）；
}

只需确保使用

！重要信息

选择器也是如此

。中央snackbar{
文本对齐：居中！重要；
}

只需将其添加到你的style.css（或任何全局css，在我的例子中，我将其放在我的app.component.scss）中即可

边际：自动将在snackBar内使跨度标记居中

文本对齐：居中将文本置于跨度内的中心

---

像这样的设置将应用于所有snackbar。

对于angular 7 w/材质，我在global style.css中使用它：

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

---

对于按需以文本为中心的文本

SASS：

然后将“文本中心”添加到panelClass

let config = new MatSnackBarConfig();
config.panelClass = "text-center";
this.snackBar.open(message);

---

这样，如果Snackbar带有一个动作，您就可以拥有标准的外观。

虽然这个问题已经很老了，但我认为发布我的解决方案可能会对其他人有所帮助

经过大量的研究和一些尝试和错误，下面的代码就是让我的snackbar处理居中文本所需要的全部代码。（提示：目前我使用的是最稳定的角度版本）

以下代码已添加到global styles.css文件中

// extract from styles.css (global)
snack-bar-container.success  {
  background-color: rgb(31, 121, 39);
  color: rgb(255, 255, 255);
}

snack-bar-container.notification simple-snack-bar  {
  font-size: 18px !important;
}

// this part is all I did to center the text. 
// Take note of the css declaration, not just the style inside.
simple-snack-bar > span {
  margin: 0 auto;
  text-align:center !important;
}

---

这就把快餐店搬到了最上面。。我想将其中的文本居中

。mat simple snackbar{text align:center；}

适用于我，你把这行放在哪里了@Saka7有人得到了另一个答案吗？抱歉，但这不起作用：（文本位于已经位于左侧的跨距内。如果您已经有一个通用文本中心类，则不需要冗余文本对齐（抱歉，注释中没有可用的换行符）。例如：snack-bar-container.text-center{span{左边距：自动；右边距：自动；}}。文本中心{文本对齐：中心}

let config = new MatSnackBarConfig();
config.panelClass = "text-center";
this.snackBar.open(message);

// extract from my-notification-service.ts file
// Note that I created the above service file, imported "MatSnackBar"
// & "MatSnackBarConfig" from @angular/material/snack-bar, 
// and added a property of type "MatSnackBar" into the constructor. 
// After that, I created the below object and function.
// The function will be called by any submit button in the project.

mySnackBarConfig: MatSnackBarConfig = {
  duration: 3000,
  horizontalPosition: 'center',
  verticalPosition: 'bottom'
}

displayMessage(msg: string) {
  this.mySnackBarConfig['panelClass'] = ['notification','success'];
  this.snackBar.open(msg, '', this.mySnackBarConfig);
}

// extract from styles.css (global)
snack-bar-container.success  {
  background-color: rgb(31, 121, 39);
  color: rgb(255, 255, 255);
}

snack-bar-container.notification simple-snack-bar  {
  font-size: 18px !important;
}

// this part is all I did to center the text. 
// Take note of the css declaration, not just the style inside.
simple-snack-bar > span {
  margin: 0 auto;
  text-align:center !important;
}