jQuery를 사용하여 div를 가운데 맞춤

div margin: 0 auto; divdiv는 사용자가 버튼을 클릭 할 때 jQuery를 사용하여 너비를 높이는 div $("#organizer_listings_container")입니다. 크기를 조정 한 후 다음 코드를 사용하여이 크기 조정 된 div $("#organizer_listings_container")의 가운데에 맞 춥니 다.jQuery를 사용하여 div를 가운데 맞춤

크기 조정 코드

// Center content when width changes 
if($("#organizer_listings_container").css("position") != 'absolute') { 
    $("#organizer_listings_container").css("position","absolute"); 
    var left = ($(window).width() - $("#organizer_listings_container").width())/2 + "px"; 
    $("#organizer_listings_container").css('left', left);  // set initial 'left' 
} 
left = ($(window).width() - (852))/2 + "px"; 
$("#organizer_listings_container").animate({'left': left}); // animate to final 'left'

가 문제 : 새로운 사업부를 추가 할 때이 (jQuery를 show()를 사용하여 볼 수 있도록),이 표시는 #organizer_listings_container 위, #organizer_listings_container 변화는 아래로 올바른이다. 이제 새로 추가 된 div를 제거하면 #organizer_listings_container이 다시 이동하지 않습니다!

이것이 사용 된 jQuery 센터링 코드에 필요한 절대 위치 지정 때문인 것 같습니다. 새로 추가 된 div가 제거되면 어떻게 크기가 조정 된 div shift를 다시 만들 수 있습니까? 다음 계산 된 높이로 top을 상쇄하여 크기를 조정할 DIV 위로 이동 새로 추가 된 DIV의 높이를 계산하기 위해 jQuery를 사용하여

내가

출처

2012-01-17 Nyxynyx

두 div를 언급하는 것처럼 들리지만 1 만 언급 하시겠습니까? –

첫 번째 div'## organizer_listings_container' 위에 두 번째 div가 추가됩니다. 게시물을 편집하여 명확하게 보이게하십시오. – Nyxynyx

http://jsfiddle.net/의 예는 어떻습니까? – PetersenDidIt

당신은 jQuery를 사용하는 것을 방지 할 수 있습니다 원하는 것보다 더 더러운 것으로 보인다 및 새로 추가 된 DIV에 클래스를 추가하고과 같이 최고 변위와 중앙 : 클래스가 인라인 스타일을 포함 할 것이라고

<div class="container" style="background:blue; width:100%;"> 
<div class="box" style="background:green; width:50px; height:40px; margin: 0 auto; margin-top:20px;"></div> 
</div>

참고이 그냥 예입니다.

jquery가 필요한 것은 컨테이너의 높이가 100 %인지 확인하는 것입니다. 그러나 상자를 볼 때만 컨테이너를 중앙에 배치하기 위해 컨테이너를 사용한다면이 요구 사항은 필요하지 않습니다.

출처

2012-01-17 02:45:06

jQuery를 사용하여 div를 가운데 맞춤

답변

관련 문제