Question

我正在使用this tutorial创建全屏幕背景。我希望我的内容div位于屏幕中间。当您调整窗口大小时，它应随之移动但保持在中心位置。我通常使用margin: 0 auto 0 auto;来实现这一点。但在这种情况下，由于全屏幕背景，它位于左上角。

如何将内容div居中并具有自动左右边距？

CSS：

      * {
            margin:0;
            }

        html, body {
            height:100%;
            }

        .clear {
            clear:both;
            }

        body {
            font-size: 62.5%; /* Resets 1em to 10px */
            background-repeat:repeat-x;
            background-image: url('images/background-repeat.jpg');
            margin:0px;
            }

        #body {
            width:1000px;
            margin:0 auto 0 auto;
            }           

#content {
    background-image:url('images/william-corbett-content-repeat.png');
    background-repeat:repeat-x repeat-y;
    width:1000px;
    min-height:500px;
    }  

        .fullBg {
          position: absolute;
          top: 0;
          left: 0;
          overflow: hidden;
        }

        #maincontent {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 50;
        }

HTML：

<div class="wrapper">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg1.jpg" alt="" id="background">
    <div id="maincontent">
        <div id="body">
            <div id="content"></div>
        </div>    
    </div>
    <div id="footer">
        <p><a href="/home" title="Home">Home</a> | <a href="/about" title="About">About</a></p>
    </div>
</div>

Answer 1

您需要添加宽度：100％;到#maincontent类

#maincontent {
position: absolute;
top: 0;
left: 0;
z-index: 50;
width: 100%;
}

中心在全屏背景下对齐内容？

1 个答案: