0

我想在我的背景图像之上居中图像。

#home 是延伸到浏览器大小的背景图像
#hometitle 是我想要在顶部的图像

我想将#hometitle 居中在我的#home 背景之上，因此无论浏览器的大小如何，它都会被隔开到背景图像的中心。

我试过 margin: 0 auto; 然后 margin-top: 250px; 紧随其后，但这只会在 250 像素的整个背景图像上方产生一个白色间隙；

位置：绝对；和 top/left 并没有真正的帮助，因为当您调整浏览器大小时，位置将是静态的而不是居中。

#home {
height: 1000px;
margin: 0 auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-image: url("images/bigheader.png");
}

#hometitle {
background-image:url(images/title.png);
height: 260px;
width: 435px;
}

HTML：

<div id="home">
    <div id="hometitle">
    </div>
</div>
4

2 回答 2

1 
#hometitle {
    background-image:url(images/title.png);
    height: 260px;
    width: 435px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -130px;
    margin-left: -217px;
}

应该这样做，因为我们将主页标题图像绝对放置在浏览器渲染空间的中心。如果您对图像添加的位置有一些问题

body {position: relative;}

这是将元素放置在我经常使用的中心的最简单和最好的技术之一

于 2012-07-27T23:58:19.363 回答
0

由于边距折叠，您不能使用相对于 向下margin-top移动，但您可以在其上添加顶部填充。<div id="hometitle"><div id="home"><div id="home">

于 2012-07-27T23:59:47.633 回答