Mat-toolbar内容对齐方式

Question

我想在此示例中将内容左右对齐。

https://material.angular.io/components/toolbar/examples

我想要图标在左侧，文本在中间，用户名在最右边。

我怎样才能做到这一点？

Answer 1

您可以执行以下操作来完成此操作。

将mat-icon移到容器的顶部，使其首先放置。

 <mat-toolbar-row>
   <mat-icon class="example-icon">verified_user</mat-icon>

将example-spacer类应用于中间所需的文本。

<span class="example-spacer">Second Line</span>

将以下内容添加到toolbar-multirow-example.css的example-spacer类中

text-align: center;

之后的用户名

<span>User Name</span>

Stackblitz