居中動態和固定格

我不擅長CSS，我已經花了這麼多小時做這件事，我想集中一個固定/動態大小div。它像居中動態和固定格

<div> 
    // Imagine to have a multiple images here, size is 100x100. 
    // When I click on the image (I am using jquery for this), #fade will appear and a window 
    // that contain the original size of the image. 
    <img class="picture" src="picture.jpg" width="100" height=100"/> 
</div> 
<div id="fade"></div> 
<div class="imgWindow"> 
    <img src="picture.jpg"/> // original size 
</div>

CSS

#fade { 
    display: none; 
    background: black; 
    opacity:0.4; 
    filter:alpha(opacity=50); 
    z-index: 10; 
    position: fixed; 
    left: 0; top: 0; 
    width: 100%; height: 100%; 
} 

.imgWindow { 
    width: 640px; 
    height: 422px; 
    background: white; 
    position: fixed; 
    margin-left: 10%; 
    margin-top: 5%; 
    z-index: 11; 
    left: 0; top: 0; 
}

圖像窗口應該是居中的，即使我重新大小的瀏覽器窗口。請幫忙，謝謝！

來源

2012-07-27 kimbebot

做新的形象在新窗口或同一窗口 – Sibu 2012-07-27 05:07:39

在同一個窗口中打開，就像一個模態窗口。 – kimbebot 2012-07-27 05:08:51

我寧願去jquery..this jQuery函數會一直居中圖像

jQuery.fn.center = function() { 
     this.css("position","absolute"); 
     this.css("top", (($(window).height() - this.outerHeight())/2) + $(window).scrollTop() + "px"); 
     this.css("left", (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft() + "px"); 
     return this; 
    }

來源

2012-07-27 05:13:10 Sibu

當您使用CSS屬性「position」，則無法通過調整其他性能居中的元素，除了你用。您應該使用那些對：

嘗試

img{ 
width: XXpx; 
height: YYpx; 
position: fixed; 
top: YY%; 
left: XX%; 
border: 0; 
z-index: 1; /* optional */ 
}

http://www.wpdfd.com/editorial/thebox/de ...

來源

2012-07-27 05:14:52 Prashobh

居中動態和固定格

回答

相關問題