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

【问题标题】：Align text to center inside Snackbar (Angular Material)将文本对齐到 Snackbar 内的中心（角度材质）
【发布时间】：2021-02-25 21:43:14
【问题描述】：

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

}

谢谢你:)

【问题讨论】：

.mat-simple-snackbar {text-align: center;} 为我工作
你把这条线放在哪里了？ @萨卡7

标签： css angular angular-material

【解决方案1】：

只需将其添加到您的 style.css（或任何全局 css，在我的情况下，我将它放在我的 app.component.scss 中）

margin:auto; 将 span 标签居中在snackBar

text-align:center; 将文本在 span 内居中

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

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

【讨论】：

【解决方案2】：

对于 angular 7 w/material，我在全局 style.css 中使用它：

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

【讨论】：

【解决方案3】：

MatSnackBarConfig 的 panelClass 属性接受您可以在主应用程序的styles.css 中定义的 CSS 类：

openSnackBar(message: string) {
  let config = new MatSnackBarConfig();
  config.panelClass = 'center-snackbar';
  this.snackBar.open(message);
}

只要确保你也使用!important 选择器！

.center-snackbar {
  text-align: center !important;
}

【讨论】：

有人回答了吗？
抱歉，这不起作用 :( 文本位于左侧的跨度内。

【解决方案4】：

用于按需居中的文本。

SASS：

snack-bar-container.text-center {
  span {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

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

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

这样，如果 Snackbar 带有操作，您就可以拥有标准外观。

【讨论】：

如果你已经有一个通用的 text-center 类，那么多余的 text-align 是不必要的（很抱歉 cmets 中没有可用的换行符）。即：snack-bar-container.text-center { span { margin-left: auto;边距右：自动； } } .text-center { text-align: center }

【解决方案5】：

试试这个

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

参考：https://material.angular.io/components/snack-bar/api

例如：https://stackblitz.com/edit/angular-snackbar

【讨论】：

刚刚将小吃店移到顶部.. 我想将其中的文本居中

【解决方案6】：

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

经过大量研究和反复试验，我只需要以下代码就可以让我的快餐栏使用居中的文本。（提示：我使用的是目前最稳定的 Angular 版本）。

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

以下代码已添加到全局 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;
}

【讨论】：