css - 网站不会居中

Question

使用 Wordpress 主题，并且需要在调整浏览器窗口大小时使蓝色模糊背景与滑块保持一致。我已经实现了这个目标，但是我注意到当您缩小浏览器时，所有内容都不会保持居中，左侧有很大的空间。解决此问题的最佳方法是什么？

http://www.stringcreative.ca/wp/

Answer 1

这是因为您将滑块居中的解决方案不优雅，并且依赖于固定宽度和绝对定位以使其看起来正确。

要修复它，您需要更改一些内容。

将#homebgw更改为：

#homebgw {
    background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% -117px transparent;
    height: 411px;
    width: 100%;
}

将#header更改为：

#header {
    background: url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat scroll 50% 0;
    height: 100px;
    margin: 0 auto;
    padding-bottom: 35px;
    width: 1400px;
}

很简单，您不需要绝对定位来解决您上面发布的问题。如果您使用绝对定位和负边距来纠正中心对齐问题，您可能做错了什么。保持简单，谷歌如何实现你想要的结果。网络上充满了有用的文档来实现这些基本结果，而无需通过修复来破坏您的代码；）

Answer 2

网站有点乱，你需要有图像的包装器，然后以相同大小的容器居中

#wrapper {
background: #000b1a url("http://www.stringcreative.ca/wp/wp-content/themes/Rbox2Pro/images/masthead.jpg") no-repeat fixed top center;
}

#header_container {
margin: 0 auto;
height: 117px;
width: 960px;
position: relative;
}

不需要将很多位置设置为绝对位置，并将边距设置为 - 以使其适合。还可以查看 960 网格系统。我一直都在使用它，并为我节省了大量时间来适应网站。希望这可以帮助