居中乘法图像

我有一个小问题，我认为它很简单。居中乘法图像

基本上我有一个网站看起来像这样。

enter image description here

在我的屏幕现在看起来不错，但是当我在浏览器窗口中拖动并因此它不看伟大。

我希望IMG1和IMG2位于站点的中心，IMG2位于IMG1的顶部。

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

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

和像DIV ID = “IMG1” 等

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

感谢

来源

2014-07-14 mobaho

在这里你去。看看下面的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

来源

2014-07-14 07:07:35

由于需要重叠，绝对定位似乎有需要，一个简单的方法来完成，如果你知道图像尺寸是将图像定位在50％，并且“减去”边缘左侧的一半宽度。我提供拨弄一个例子： 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 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/

来源

2014-07-14 07:08:05 frikinside

居中乘法图像

回答

相关问题