网站不会居中

时间:2013-01-31 23:51:35

标签: css wordpress

使用Wordpress主题,并且在重新调整浏览器窗口大小时,需要让蓝色模糊背景与滑块保持一致。我已经实现了这个目标,但我注意到当你缩小浏览器时,一切都没有保持居中,左边有一个很大的空间。解决这个问题的最佳方法是什么?

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

2 个答案:

答案 0 :(得分:0)

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

要解决此问题,您需要更改一些内容。

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

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

答案 1 :(得分:0)

网站有点混乱,你需要有图像的包装,然后容器的中心大小相同

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