html - 如何在有 Angular Material 中将 Logo 居中对齐？

Question

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

最后放置了一个左侧菜单按钮、 Logo 和一个按钮以及一个文本。

问题:

Here the logo at center is not center to the toolbar but it is center to the first menu button and the other button after logo text.

要求:

The logo at the center needs to be center for the entire toolbar no matter what is placed next to it.

工作 Stackblitz:

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

Answer 1

只需将工具栏设置为position: relative 并将 Logo 放置在

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

这样，无论怎样，logo 都会在中间。当然，不要忘记将 Action 始终保持在右侧(将 margin-left: auto 添加到 Action 中或将 justify-content: space-between 添加到整个 Action 中)工具栏)