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

私はむしろ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 に答える
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 に答える