如何使用 flex 布局在 mat-toolbar 内居中文本？

【问题标题】：How to center text inside the mat-toolbar using flex layout?如何使用 flex 布局在 mat-toolbar 内居中文本？
【发布时间】：2019-01-11 09:47:59
【问题描述】：

我需要创建一个包含 2 行简单的公司名称和年份的页脚。这是我的 html sn-p，

<mat-toolbar color="primary" style="height: 176px">
  <span>Company name</span>
  <span>Copyright ©2019</span>
</mat-toolbar>

因此，公司名称必须位于中心（垂直和水平），并且版权应位于公司名称的下方。

【问题讨论】：

标签： angular-material angular-flex-layout

【解决方案1】：

只需将spans 放入mat-toolbar-row。它们基本上是为按行组织内容而设计的。

<mat-toolbar>
    <mat-toolbar-row>
        <span class="span">First Line</span>
    </mat-toolbar-row>
    <mat-toolbar-row>
        <span class="span">Second Line</span>
    </mat-toolbar-row>
</mat-toolbar>

那么你只需要将spans居中。

.span {
    margin: auto;
}

【讨论】：