Mat-toolbar 内容 alignmnet

Question

在这个例子中，我想让内容左右对齐。

我想要左侧的图标，中间的文本和行最右侧的用户名。

我怎样才能做到这一点？

Answer 1

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

将移动mat-icon到容器顶部以将其放在首位。

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

将example-spacerclass 应用于您想要在中间的文本。

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

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

text-align: center;

之后的用户名

<span>User Name</span>

闪电战