html - 响应式导航栏不会居中

Question

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

HTML

CSS

网站(调整窗口大小以了解我的意思。):shanebacon.com

Answer 1

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

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

这样做是将导航向左移动50%，但它不是从中心移动 50%，而是从左 Angular 移动。因此，您需要使用负边距(宽度的一半)将导航带回到中间。

另请注意:这些类似乎都循环在一起:

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

不要将此添加到所有三个，它会丢弃您的 CSS。请确保仅将其添加到 .masthead 或 .masthead.nav

EXAMPLE