响应式导航栏不会居中

Question

我正在使用 bootstrap 制作响应式 html 网站，但我似乎无法将我网站的导航栏置于某个查看点的中心。（我把它放在 pastbin 中，因为它有很多代码，抱歉。）

网站（调整 window 的大小以了解我的意思。）：shanebacon.com

Answer 1

您的问题是因为您在导航栏上使用了 position: fixed，这使该元素脱离了文档流。所以 margin: auto 不会有效果。但是你确实有 1000px 的固定宽度，所以你可以使用这个：

.masthead.nav{
   left: 50%;
   margin-left: -500px;
}

这样做是将您的导航向左移动 50% 但它不是距中心 50%，而是距左角。所以你需要使用负边距（宽度的一半）将导航带回到中间。

另请注意：看起来这些类都是循环在一起的：

.masthead, .mastfoot, .masthead .inner {
   width: 1000px;
   position: sticky;
   margin: 0 auto;
}

不要将此添加到所有三个，它会甩掉你的 CSS。请务必仅将其添加到 .masthead 或 .masthead.nav

Responsive nav bar will not center