如何使用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;
}