Question

我正在开发一个固定宽度div居中的网站，我希望在div的两侧有两个设计，我可以使用两个div。问题是我这样做的方式，这些图像添加到网站宽度，如果窗口太小，会导致出现水平滚动条。即使整个内容div适合屏幕。

CSS

.container {
    margin: 0 auto;
    width: 500px;
}

.span {
    margin-right: 0;
    width: 500px;
}

.logo {
    margin-top: 25px;
}

.logo-img {
    height: 60px;
    left: -21px;
    position: relative;
}

.swirls {
    height: 0px;
}

.left-swirls {
    position: relative;
    top: -50px;
    right: 100px;
    width: 188px;
    z-index: -1;
}

.right-swirls {
    position: relative;
    top: -50px;
    left: 215px;
    width: 200px;
    z-index: -1;
}

.nav {
    background-color: #0ff;
}

.content {
    background-color: #00f;
    height: 200px;
}

HTML

<div class="container">
        <div class="span logo">
            <img src="http://imageshack.us/a/img839/2507/logongv.png" class="logo-img"/>
        </div>
        <div class="span swirls">
            <img src="http://imageshack.us/a/img831/3254/leftswirls.png" class="left-swirls" />
            <img src="http://imageshack.us/a/img600/7424/rightswirls.png" class="right-swirls" />
        </div>
    <div class="span last nav">
        Nav Bar
    </div>
    <div class="span content">
        Body content
    </div>
</div>

可以在此处查看此问题的示例：http://jsfiddle.net/e4j6b/8/

我正在尝试将背景图像相对于div而不是浏览器的两侧居中。

有没有办法将背景图像居中，就像带有边距的div：0 auto？

Answer 1

如果你想要.left-swirls和.right-swirls不添加到文档的宽度，那么它们应该是背景图像。（对于现代浏览器，多个背景图像可以正常工作。）

示例：http://jsfiddle.net/MbGSP/1/

body {
  background: url(http://imageshack.us/a/img831/3254/leftswirls.png) center center no-repeat,
              url(http://imageshack.us/a/img600/7424/rightswirls.png) center center no-repeat;
}

您可以使用center center水平和垂直居中背景图像作为位置。

网站背景图像居中并修复？

1 个答案: