居中倍增图像

Question

我有一个小问题，我觉得它很简单。

基本上我的网站看起来像这样。

在我的屏幕上，它现在看起来很棒，但是当我在浏览器窗口中拖动时，它看起来不太好。

我希望IMG1和IMG2位于网站的中心，IMG2位于IMG1之上。

#IMG1 {position: absolute; top: 5%; left: 25%;}

#IMG2 {position: absolute; top: 15%; left: 34.80%;}

并且喜欢div id =“img1”等。

是否有任何提示将这两个图像居中？ 我正在使用fancybox的图像，因为我需要一个弹出窗口，如果有话要说。

由于

Answer 1

你走了。请看下面的HTML和CSS。要将绝对位置与屏幕中心对齐，您必须将左右分配为0，然后分配margin:0px auto以显示结果。

<强> HTML

<div class="bgimg">
  <div class="img1"></div>
  <div class="img2"></div>
</div>

<强> CSS

 .bgimg
{
 background:url(http://i-cdn.phonearena.com/images/article/32854-image/First-samples-from-Sonys-new-13MP-stacked-camera-sensor-capable-of-HDR-video-show-up.jpg);
position:relative;
width:500px;
height:500px;
margin:0px auto;
}
.img1
{
background:url(http://i-cdn.phonearena.com/images/article/47006-image/Alleged-Samsung-Galaxy-Note-3-photosphere-sample-unearthed.jpg) no-repeat;
width:200px;
height:200px;
position:absolute;
top:20px;
left:0;
right:0;
margin:0px auto;
}
.img2
{
 background:url(http://m.c.lnkd.licdn.com/mpr/pub/image-pJdq08BYi8MHY3zGf5zIydXbyfSka31-0GzQKp6YyB0u7ONcpJdQHUaYyXkB7hcsRKBQ/melody-sample.jpg) no-repeat;
width:100px;
height:100px;
position:absolute;
top:50px;
left:0;
right:0;
margin:0px auto;
}

FIDDLE DEMO

Answer 2

由于你需要重叠，似乎需要绝对定位，如果你知道图像尺寸是将图像定位在50％并且减去＆＃34;那么这是一种简单的方法。边缘左边宽度的一半。 我提供了一个例子： http://jsfiddle.net/frikinside/dR7z8/

<div id="bg">
    <img id="img2" src="http://cdn1.mos.techradar.futurecdn.net//art/Watches/Google/Google_watch_concept-578-80.jpg"/>
    <img id="img1" src="https://lh3.ggpht.com/sAnKrUFttffrMsAJUgM_H8la1sw5cKqbROwgZUU6MOqjlKUbsNGCfm4elZ2jAtfqA0c=w300" />
</div>
#bg{position: relative;}
#img2{
position: absolute;
left: 50%;
margin-left: -289px;
}
#img1{
position: absolute;
top: 25px;
left: 50%;
margin-left: -150px;
}
}

但我认为将img和背景div与其他图像一起使用会更简单，如下所示：

<div id="bg">
    <div id="img2"><img id="img1" src="https://lh3.ggpht.com/sAnKrUFttffrMsAJUgM_H8la1sw5cKqbROwgZUU6MOqjlKUbsNGCfm4elZ2jAtfqA0c=w300" /></div>

</div>
#img2
{
 background:url("http://cdn1.mos.techradar.futurecdn.net//art/Watches/Google/Google_watch_concept-578-80.jpg") no-repeat top;
    text-align: center;
padding-top: 5%;
}

http://jsfiddle.net/frikinside/88DZr/