절대적으로 배치 된 요소 가운데 맞추기

Question

두 요소가 겹쳐진 요소가 있습니다. 포함하는 요소는 왼쪽과 세 행으로 플로팅됩니다. jQuery 수정을 사용하여 이미지를 요소의 가운데에 배치했습니다. 이미지가 크기가 변하기 때문에 반응 형 디자인이므로 jQuery를 사용해야했습니다. 이 모든 기능은 일부 휴대 기기에서 훌륭하게 작동합니다. 임의의 요소를 누를 때까지 이미지 너비가 계산되지 않는 것처럼 보입니까? 나는 이것이 의미가 있기를 바랍니다. URL은 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

내가 근래 e는 과거의 창 너비를 기반으로하고 요소의 왼쪽 여백을 설정합니다.

$(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)