居中乘法圖像

我有一個小問題，我認爲它很簡單。居中乘法圖像

基本上我有一個網站看起來像這樣。

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

居中乘法圖像

回答

相關問題