1

中央に固定幅のdivがあるサイトで作業していて、2つのdivを使用して取得できたdivの両側に2つのデザインを配置したいと考えていました。問題は私がやった方法です。これらの画像はサイトの幅に追加され、ウィンドウが小さすぎると水平スクロールバーが表示されます。コンテンツ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を基準にして背景画像を中央に配置しようとしています。

マージン0autoのdivのように背景画像を中央に配置する方法はありますか？

4

1 に答える 1

2

.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に配置できます。

于 2012-12-14T21:16:43.617 に答える