Question

我有一个包含两个图像的元素，一个在另一个上面。包含元素向左浮动并且一行三个。我使用了jQuery修复程序将图像置于其元素中心。我不得不使用jQuery，因为它是一个响应式设计，所以图像改变了大小。除了某些移动设备外，这一切都很有效。在按下随机元素之前，似乎没有计算图像宽度？我希望这是有道理的。该网址为mooble.co.uk，页面左侧是较大的图片。

**编辑

抱歉，我没有说清楚，我使用的解决方案工作正常，但在移动设备上，宽度和左边距似乎不是在加载时计算的？大约20秒之后它似乎就位了。

编辑**

<div class="g1" id="mass">
<p><span class="highlight"></span></p>
<div id="mass-cont">

<img class="bottom" src="images/mass.png" />
<img class="top" src="images/no-mass.png" />


</div>

</div>

CSS

#mass{position:relative;}
#mass-cont{}
#mass img{position:absolute;left:50%;}
#mass img{transition: opacity 1s ease-in-out;display:block;}
#mass img.top:hover{opacity:0;}

JS

//Functions
function setImageHeight(){

var imageSize = $('.bottom').height();
$('#mass-cont').height(imageSize);

var imageWidth = $('.bottom').width();
var position = imageWidth / 2;

$('#mass-cont > img').css('margin-left' , '-'+ position + 'px');

}

//Load Document
$(document).ready(function() {

//Set image height

$('.bottom').load(function(){

setImageHeight();

});

$(window).resize(function() {

setImageHeight();


});

});

Answer 1

我已经根据过去的窗口宽度和设置元素的左边距来完成它。

$(window).resize(function() {
 setPosition();
});

$(document).ready(function () {
 setPosition();
});

function setPosition(){
var WindowWidth = $(window).width();
var BottomWidth = 300; //The width of bottom
Left Position = (WindowWidth - BottomWidth) / 2;
$(".bottom").css("margin-left", BottomWidth + "px");
}

Answer 2

试试这个：

left = ($("#mass-cont").width() - $(".bottom").width()) / 2;
$(".bottom").css("left", left)

将绝对定位的元素居中

2 个答案: