Question

有人可以告诉我如何将图像置于其div中，同时保持图像与div顶部重叠。

<body>
    <div id="outerdiv">
        <div id="innerdiv">
            <img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
            <div id="body">

            </div>
        </div>
    </div>
</body>

body{
   height:100%;
    background-color: #142758;
    padding-top:50px;
}

#outerdiv {
    margin:auto;
    width:70%;
    height:500px;
    background-color:#778CAC;
}
#innerdiv {
    width:95%;
    margin:auto;
    height:95%;
    background-color:white;
    position: relative;
    top: 50%;
    transform:translateY(-50%);

}
header {
    width:100%;
}
#banner {
    background-image:url('lesterbanner.jpg');
    width:300px;
    margin-left:auto;    
    margin-right:auto;
    margin-top:-90px;
}

马尔科姆

Answer 1

默认情况下，

img代码为display: inline-block，可以在父元素上以text-align: center;为中心：

#innerdiv {
  ...
  text-align: center;
}

JSFIDDLE

Answer 2

只需text-align:center;添加到#innerdiv

<强> jsFiddle example

Answer 3

尝试使用％作为保证金或将其分配给div

<body>
<div id="outerdiv">
<div id="innerdiv">
<!-- assign div --><div class="img_holder">
<img src="http://www.mylester.lester.com.au/Content/Images/LesterBanner.jpg" alt="lesterbanner" id="banner" />
</div>
<div id="body">
</div>
</div>
</div>
</body>

的CSS

    body{
   height:100%;
    background-color: #142758;
    padding-top:50px;
}

#outerdiv {
    margin:auto;
    width:70%;
    height:500px;
    background-color:#778CAC;
}
#innerdiv {
    width:95%;
    margin:auto;
    height:95%;
    background-color:white;
    position: relative;
    top: 50%;
    transform:translateY(-50%);

}
header {
    width:100%;
}
#banner {
    background-image:url('lesterbanner.jpg');
    width:100%;
}
.img_holder{
    position: relative;
    width:300px;
    margin: 0 auto;
    top: -30px;
}

Answer 4

#banner {
    background-image:url('lesterbanner.jpg');
    width:300px;
    margin:-2% 0 0 42%;
}

CSS定位图像

4 个答案: