如何在有角材料的中心对齐标志？

Question

我正在制作一个顶部带有工具栏的 Angular 应用程序。

最后放置了一个左侧菜单按钮、徽标和一个按钮和一个文本。

问题：

这里的中心标志不是工具栏的中心，但它是 居中到第一个菜单按钮和徽标文本之后的另一个按钮。

要求：

中心的标志需要在整个工具栏的中心 不管它旁边放什么。

工作 Stackblitz：

https://stackblitz.com/edit/material-flex-toolbar-21bjwf

Answer 1

只需制作工具栏position: relative 并将徽标与

.logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

这样，无论如何，徽标都会在中间。当然，不要忘记将操作始终放在右侧（在操作中添加 margin-left: auto 或为整个工具栏添加 justify-content: space-between）