css - 如何使 Angular Material 按钮中的文本居中？

Question

我有一个 Angular Material 按钮:

<a mat-raised-button class="buttons-class" color="accent">Hello!</a>

我增加了它的大小:

.buttons-class {
  height: 60px !important;
  width: 210px !important;
  align-items: center;
}

现在，我希望将文本 (Hello!) 置于其中。目前文本的偏移量如下:

将文本放入 span 或 div 中并使用标准居中技术不起作用。

Answer 1

你可以使用 ng-deep ::ng-deep 阴影穿透后代组合器强制样式通过子组件树向下进入所有子组件 View 和任何类的样式

::ng-deep.buttons-class {
  height: 60px !important;
  width: 210px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}