Bootstrap折叠菜单中的中心徽标图标

Question

第一张图片是全尺寸浏览器窗口上的菜单。

Full-size menu

菜单使用Bootstrap，因此当窗口窄于某个宽度时，会出现一个小菜单按钮，您可以使用它来打开菜单。但是，当在小窗口中打开菜单时，我希望徽标在与菜单项相同的轴上垂直对齐，并且与打开的菜单按钮水平对齐。

Small window menu

我尝试将整个菜单栏的宽度设置为100％并使用margin: 0 auto将徽标居中，但这不起作用。使用position:absolute菜单按钮将我的按钮向右移动到徽标上方。

谢谢！

Answer 1

最简单的方法是改变它和aboslut：

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