Question

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

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

问题：

此处中心的徽标不是工具栏的中心，而是居中于第一个菜单按钮，而位于徽标文字之后的另一个按钮。

要求：

位于中心的徽标必须位于整个工具栏的中心不管旁边放什么。

工作中的闪电战：

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）