Question

我正在使用Bootstrap Studio构建旅游网站 - ＆gt; http://stackoverflowquestion.bss.design/

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

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

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

然而，这种方法的问题是：

当屏幕变小时，徽标会调整大小，但汉堡菜单会保持相同的高度
当用户向下滚动时，整个导航栏缩小，汉堡菜单保持相同的高度

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

Answer 1

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

将其添加到navbar-header元素：

display: flex;
align-items: center;

Answer 2

如果它位于绝对位置，您可以使用button.navbar-toggle.collapsed { top:50%; transform: translateY(-50%); }。

像这样：

relative

使用％将使其动态化。这会将其垂直居中于其第一个父级，其位置为absolute或<html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> </head> <style> .parent { border: 5px solid lightcoral; display: flex; } .child { display: flex; text-align: center; flex-direction:column; max-width:300px; } .item{ display: flex; margin:5px; text-align: center; margin-left: auto; } .item-input{ margin:5px; display: flex; text-align: center; box-sizing: border-box; } @media screen and (max-width: 1200px) { .parent { justify-content:left; } } @media screen and (min-width: 1200px) { .parent { justify-content:center; } } </style> <div class="parent"> <div class="child"> <div class="item">Name</div> <div class="item">Age</div> <div class="item">Country</div> <div class="item">Email</div> </div> <div class="child"> <div class="item-input"><input type=text></div> <div class="item-input"><input type=text></div> <div class="item-input"><input type=text></div> <div class="item-input"><input type=text></div> </div> </div> </div> </htmL>。

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

2 个答案: