Question

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

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

Answer 1

我宁愿去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;
    }

Answer 2

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

以动态和固定的div为中心

2 个答案: