如何将 Bootstrap 汉堡菜单垂直对齐导航栏？

Question

我正在使用 Bootstrap Studio 构建一个旅游网站 -> http://stackoverflowquestion.bss.design/

到目前为止一切顺利，除了一个问题：我很难垂直对齐汉堡菜单与徽标的比例。

解决我发现的问题的一种快速方法是将以下内容添加到css：

button.navbar-toggle.collapsed {
    top:42px;
}

然而，这种方法的问题在于：

1. 徽标会随着屏幕变小而调整大小，但汉堡菜单保持不变
2. 当用户向下滚动时，整个导航栏缩小，汉堡菜单保持在同一高度

现在我知道我可以添加一堆 @media 查询，但是我最终会得到大量的查询，我想知道是否有更好的方法让汉堡菜单始终垂直居中于徽标?

Answer 1

您可以使用 flexbox 使菜单按预期对齐。

将此添加到navbar-header 元素：

display: flex;
align-items: center;

Answer 2

如果它是绝对定位的，你可以使用transform。

像这样：

button.navbar-toggle.collapsed {
    top:50%;
    transform: translateY(-50%);
}

使用 % 将使其动态化。这将在其第一个父级中垂直居中，位置为relative 或absolute。