html - 在css中居中一个元素

Question

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

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

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

Answer 1

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

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

编辑：

此外，请考虑使用以下清除修复，因为导航元素是内联的，并且当浏览器宽度缩短时，下面的内容往往会混淆：

#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; } 

它居中。