在css中居中元素

Question

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

编辑：缩小是否已经显示居中。

因此，如果您在网站上放大浏览器，您将看到所有其他元素保持相对于彼此的位置，但导航栏保持在左侧。无论用户窗口放大/缩小，我都希望导航栏在页面上保持居中。

Answer 1

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

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

编辑：

另外，请考虑使用以下clear-fix，因为导航元素是内联的，并且当浏览器宽度缩短时，下面的内容会混淆：

#top_navigation {
    overflow: hidden;
    }

以下是您网站的屏幕截图，上面的代码注明了水平居中：

Answer 2

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

Answer 3

@gmeben是正确的，因为你的

#top_navigation { width: 100% }

我很快将其改为

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

它居中。