[英]jQuery CSS Attributes not Applying
I am centering a element inside a div horizontally and vertically, however the jQuery CSS code seems to be only resulting in style="margin: 0px"
any ideas? 我将一个元素在div内水平和垂直居中,但是jQuery CSS代码似乎只会导致
style="margin: 0px"
什么想法?
Example ( script src ) 示例 ( 脚本src )
jQuery: jQuery的:
image.css({
'margin-top': '-'+(style['img-width']/2)+'px',
'margin-left': '-'+(style['img-height']/2)+'px',
});
Alternatively I tried: 或者,我尝试了:
image.css({
'marginTop': '-'+(style['img-width']/2)+'px',
'marginLeft': '-'+(style['img-height']/2)+'px',
});
CSS: 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);
}
Comment the following line in your bfx.viewer.js
: 在
bfx.viewer.js
注释以下行:
image.css('margin', style['img-padding']+'px');
This is there the margin: 0px;
这是
margin: 0px;
comes from. 来自。
I just commented below positioning CSS: 我只是在下面定位CSS的地方评论过:
/*
#theater-img img {
box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.5);
left: 50%;
position: absolute;
top: 50%;
}
*/
and then changed the postion to relative instead of absolute here: 然后将位置改为相对而不是绝对:
#theater-img {
margin: 0;
padding: 0;
position: relative;
text-align: center;
}
Is it you wanted ?? 是你想要的吗?
I saw your example link. 我看到了您的示例链接。 I think use that codes after all images loaded.
我认为在加载所有图像后使用该代码。
jQuery: jQuery的:
$(window).load(function() {
$('#theater-img img').css({
'margin-top': '-' + $('#theater-img img').height()/2 + 'px',
'margin-left': '-' + $('#theater-img img').width()/2 + 'px'
});
});
and here's some css changes for your page. 这是您页面的一些CSS更改。 You should change #theater-img
您应该更改#theater-img
HMTL: HMTL:
#theater-img {
position: relative;
text-align: center;
margin: 0 0 46px 0;
padding: 0;
width: 100%;
height: 100%;
top: -46px;
z-index: -1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.