jQuery CSS屬性不適用

Question

我將一個元素在div內水平和垂直居中，但是jQuery CSS代碼似乎只會導致style="margin: 0px"什么想法？

示例 （ 腳本src ）

jQuery的：

    image.css({
            'margin-top': '-'+(style['img-width']/2)+'px',
            'margin-left': '-'+(style['img-height']/2)+'px',
    });

或者，我嘗試了：

    image.css({
            'marginTop': '-'+(style['img-width']/2)+'px',
            'marginLeft': '-'+(style['img-height']/2)+'px',
    });

CSS：

                #theater-img {
                    position: absolute;
                    text-align: center;
                    margin: 0;
                    padding: 0;
                }
                #theater-img img {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-box-shadow: 0 0 20px 20px rgba(0,0,0,0.5);
                    box-shadow: 0 0 20px 20px rgba(0,0,0,0.5);
                }

Answer 1

在bfx.viewer.js注釋以下行：

image.css('margin', style['img-padding']+'px');

這是margin: 0px; 來自。

Answer 2

我只是在下面定位CSS的地方評論過：

/*
#theater-img img {
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.5);
    left: 50%;
    position: absolute;
    top: 50%;
}
*/

然后將位置改為相對而不是絕對：

#theater-img {
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
}

是你想要的嗎？

Answer 3

我看到了您的示例鏈接。 我認為在加載所有圖像后使用該代碼。

jQuery的：

$(window).load(function() {    
    $('#theater-img img').css({
        'margin-top': '-' + $('#theater-img img').height()/2 + 'px',
        'margin-left': '-' + $('#theater-img img').width()/2 + 'px'
    });
});

---

這是您頁面的一些CSS更改。 您應該更改＃theater-img

HMTL：

#theater-img {
  position: relative;
  text-align: center;
  margin: 0 0 46px 0;
  padding: 0;
  width: 100%;
  height: 100%;
  top: -46px;
  z-index: -1;
}