响应式导航栏不会中心

Question

我正在使用bootstrap制作一个响应式html网站，我似乎无法将某个视点的网站导航栏居中。 （我把它放在pastbin因为它是一个大量的代码，对不起。）

HTML

CSS

网站（调整窗口的大小，看看我的意思。）：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

EXAMPLE