0

我不擅长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;
}

即使我重新调整浏览器窗口的大小，图像窗口也应该居中。请帮忙，谢谢！

4

2 回答 2

0

当您使用 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 ...</p>

于 2012-07-27T05:14:52.440 回答
0

我宁愿去 jquery ..这个 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-27T05:13:10.717 回答