无法使用text-align居中放置文本：在角形材质应用程序中居中

Question

我正在开发有角度的材料应用程序。一个组件具有以下html模板（app.component.html）

<mat-toolbar color="primary">
  <div class="md-toolbar-tools" style="display: inline-block">
    Liste des annonces
    <span flex></span>
  </div>
</mat-toolbar>>
..........
..........

在app.component.css中，我尝试应用这些样式

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}

mat-toolbar div {
    text-align: center;
}
.md-toolbar-tools {
    text-align: center;
}

mat-toolbar-row {
  justify-content: space-between;
}

但是，文本“ Liste des annonces”未居中。你能帮我个忙吗？