在CSS中居中一个元素

Question

我确信这个问题已被问到，通常我可以用margin来完成：0 auto;或其他的东西，但在这个网站上：otgtires.com我似乎无法将导航栏放在其父元素的顶部。我会在这里粘贴一些代码，但我认为在浏览器中使用开发工具更容易。请让我知道我失踪了！

编辑：缩小，如果它已经看起来居中。

所以，如果你放大网站上的浏览器，你会看到所有其他元素保持相对位置，但导航栏保持在左侧。无论如何放大/缩小用户窗口，我都希望导航栏始终位于页面的中心位置。

Answer 1

它不是“居中”的，因为它目前使用基于百分比的宽度。尝试一个固定的宽度，而不是：

#top_navigation { 
    width: 500px; 
    margin: 0 auto; 
    } 

编辑：

此外，可以考虑使用下面的明确修复由于导航元素是内联和下面的含量趋向于弄混当浏览器宽度被缩短：

#top_navigation { 
    overflow: hidden; 
    } 

这是你的网站与上面的代码截图展示注射的水平居中：

Answer 2

@gmeben是正确的，那是因为你的

#top_navigation { width: 100% } 

我赶紧把它改为

#top_navigation { width: 1125px; margin: 0 auto; } 

，它是居中。

Answer 3

#top_navigation { 
width: 1125px; 
margin: 0 auto 0 auto; 
}