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

Question

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

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

因此公司名称必须居中（纵向和横向），版权应位于公司名称下方。

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