0

我正在尝试添加一个 div 块，使其位于屏幕的中心。我所拥有的只是一个固定的背景图像，它正在做一些奇怪的事情。

CSS：

body {               
    margin:0;
    padding:0;
}

#middle {       <--- the white div block
    background-color:#FFF;
    display:block;
    width:750px;
    height:750px;
    margin:0 auto 0 auto;
    margin-top:15px;
    position:relative;
    overflow:hidden;
}

#bigbg {                <-- background image
    height:auto;
    width:100%;
    z-index:-100;
    min-height:100%;
    min-width:100%;
    margin-left:0%;
    position:fixed;
    margin-top:0px;
}

html:

<div id='middle'>
</div>
<img src="images/backgroundmain.jpg" id="bigbg">

看起来像这样： 看起来像这样

我希望白色 div 块居中。有没有更好的方法来应用背景图像？我能够通过将属性添加到 html 来实现我想要的background-image:url，但我无法添加我想要的所有属性，例如固定边距/宽度等。

4

3 回答 3

0

转入中产阶级margin:0 auto 0 auto;_margin:0px auto;

于 2013-10-27T04:28:12.807 回答
0

在下面更新你的 css

body {               
margin:0;
padding:0;
width=100%;
}

#middle {       <--- the white div block
background-color:#FFF;
display:block;
width:750px;
height:750px;
margin:15px auto 0 auto;
position:relative;
overflow:hidden;
}

#bigbg {                <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}
于 2013-10-27T04:31:14.573 回答
0

添加到“中间”divmargin-left: auto; margin-right: auto;

或者你可以这样做：

body {
width: 100%; <---make sure you use percentages
height: 100% <---          
margin:0;
padding:0;
}

#middle {       
background-color:#FFF;
display:block;
width:25%; <--change the width and height to % also
height:25%; <---
left: 37.5%; <--since your div is 25% wide you want to move 
<--- it 37% to the right to center it. (100% - 25% = 75% / 2 = 37.5%)
margin:0 auto 0 auto;
margin-top:15px;
position:relative;
overflow:hidden;
}

#bigbg {                <-- background image
height:auto;
width:100%;
z-index:-100;
min-height:100%;
min-width:100%;
margin-left:0%;
position:fixed;
margin-top:0px;
}

但是，如果您保持代码不变，我建议您切换margin:0 auto 0 auto;到margin-left: auto; margin-right: auto;

于 2013-10-27T04:34:51.387 回答