css - 如何将布局与完整背景对齐？

Question

我有一个完整的背景布局，但白色内容框的位置有一个意外的位置，它并不总是以不同的屏幕分辨率为中心。我应该让它变成液体还是有弹性的？现在它已经修复了。

我尝试对中间的内容框和边距使用固定宽度的容器：0 auto，但这没有做任何事情

见代码：http ://avisuals.web.fc2.com/testexample.html

我应该怎么办？有什么建议么？

Answer 1

change as per this in your css file style.css http://avisuals.web.fc2.com/style.css

#container{
width: 960px;
margin: 0 auto;
}

and remove margin from

#contentbox-top and #content1 and contentbox-bottom

ie

#contentbox-top {
margin: 0 auto;
background-image: url(images/content_top.png);
background-repeat: no-repeat;
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/content_top.png,sizingMethod=crop);
width: 700px;
height: 37px;
position: relative;
z-index: 1;
}

#content1 {
margin: 0 auto;
background: url(images/content_middle.png) repeat-y center;
width: 692px;
position: relative;
}

#contentbox-bottom {
margin: 0 auto;
background-image: url(images/content_bottom.png);
_background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/content_bottom.png,sizingMethod=crop);
background-repeat: no-repeat;
width: 700px;
height: 37px;
position: relative;
}

Answer 2

Set the element that contains the element you want centered to have text-align:center. Then set the element you want centered to have a left and right margin of auto. Then anything above those needs to have a width that allows it to expand to the width of the screen. Set it to width:auto or simply omit the width property.

Looking at your site you want to center #container inside the body element. Make sure to also give #container the appropriate width.

Answer 3

要解决您遇到的问题。我认为您应该设置margin:0 auto。您设置margin-top并margin-left在设置之后margin:0 auto。我认为这可能会导致问题。

检查演示小提琴。

希望它可以帮助你。