Css 如何在角材质按钮内使文本居中？

我有一个棱角材质按钮：

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

现在，我希望将文本（

Hello！

）放在其中。当前，文本偏移如下所示：

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

您可以使用ng deep ：：ng deep shadow Projecting Substant combinator强制样式向下穿过子组件树进入所有子组件视图 以及为任何类设置样式

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

---

请添加以下样式

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

---

不幸的是，使用

：：ng deep

不考虑高度和宽度（按钮的大小会缩小以适合文本）。在内联

样式中使用ng deep会导致问题中提到的相同问题。请测试此代码
。按钮类{高度：60px！重要；宽度：210px！重要；显示：flex！重要；对齐项目：中心；对齐内容：中心；}
按钮中有一个内部容器，该容器也应增加到与外部按钮相同的大小。是的，将按钮内的文本包装成一个跨距，调整大小以适应外部按钮，并将其内容居中。奇怪的是div被右移了
16px
，但我使用了
marginleft:-16px来解决这个问题。谢谢
.buttons-class {
  height: 60px !important;
  width: 210px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}