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网格系统。我一直都在使用它，并节省了大量时间让网站适应。希望这有帮助

网站不会居中

2 个答案: