가운데 div div

Question

this page에 페이지를 기준으로 기본 #container div를 가로로 가운데에 배치하고 싶습니다. 일반적으로 나는 그러나

#container { margin: 0 auto } 

는이 페이지 (내가 쓰지 않았다)의 레이아웃, #container에 대한 절대 위치를 사용하고 그 자식 요소 중 대부분을, 그래서이 속성이있다, CSS 규칙을 추가하여이를 것 효과 없음.

정적 위치 지정을 사용하도록 레이아웃을 다시 작성하지 않고도이 수평 중심 맞춤을 달성 할 수있는 방법이 있습니까? JavaScript/JQuery를 사용하는 것이 내 목표를 달성하는 유일한 방법 인 경우 아무런 문제가 없습니다.

Answer 1

@rquinn 답변과 동일하지만 임의의 너비로 조정됩니다. 이 데모를 확인

http://jsfiddle.net/Starx/V7xrF/1/

HTML :

<div id="container"></div> 

CSS :

* { margin:0;padding:0; } 
#container { 
    width:50px; 
    position:absolute; 
    height:400px; 
    display:block; 
    background: #ccc; 
} 

자바 스크립트

function setMargins() { 
    width = $(window).width(); 
    containerWidth = $("#container").width(); 
    leftMargin = (width-containerWidth)/2;  
    $("#container").css("marginLeft", leftMargin);  
} 

$(document).ready(function() { 
    setMargins(); 
    $(window).resize(function() { 
     setMargins();  
    }); 
}); 

Answer 2

컨테이너 폭은 1024px이므로 왼쪽 값을 50 %, 여백 - 왼쪽 값을 -512px로 지정할 수 있습니다.

Answer 3

자바 스크립트를 사용하면 #container가 브라우저 창 중앙에 배치됩니다.

document.getElementById("container").style.top= (window.innerHeight - document.getElementById("container").offsetHeight)/2 + 'px'; 
document.getElementById("container").style.left= (window.innerWidth - document.getElementById("container").offsetWidth)/2 + 'px'; 

Answer 4

또한 사용할 수 있습니다 jQuery를 : 다음

function setMargins() { 
    var width = $(window).width(); 
    if(width > 1024){ 
     var leftMargin = (width - 1024)/2; 
     $("#container").css("marginLeft", leftMargin);  
    } 
} 

내가 $(document).ready 이벤트 후이 코드를 넣어 : 메인 컨테이너가 absolute 위치를 사용하는 경우

$(document).ready(function() { 

    setMargins(); 

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

Answer 5

, 당신은 사용할 수 있습니다 이 CSS를 수평으로 가운데 놓기;

#container { 
    position:absolute; 
    width:1000px; /* adjust accordingly */ 
    left:50%; 
    margin-left:-500px; /* this should be half of the width */ 
} 

Answer 6

그것은 간단합니다. 시험해보기

body { 
    margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */ 
    text-align:center; /* Hack for Internet Explorer 5/Windows hack. */ 
} 

#Content { 
    width:500px; 
    margin:0px auto; /* Right and left margin widths set to "auto". */ 
    text-align:left; /* Counteract to Internet Explorer 5/Windows hack. */ 
    padding:15px; 
    border:1px dashed #333; 
    background-color:#eee; 
} 

Answer 7

이 방법은 저에게 가장 잘 맞았습니다. 여백은 변하지 않지만 위치는 변하지 않습니다. 필수 : ​​ 개체 -> 여백 - 왼쪽 : 0; 및 위치 : 상대적; 여기

체크 예 : jsfiddle 코드 :

function setObjPosition(container, object) { 
    var containerWidth = $(container).width(); 
    var objectWidth = $(object).width(); 

    var position = (containerWidth/2) - (objectWidth/2); 

    $(object).css('left', position); 
} 

function setPositionOnResize(container, object) { 
    setObjPosition(container, object); 
    $(container).resize(function() { 
     setObjPosition(container, object); 
    }); 
} 

사용 :

<script type="text/javascript"> 
    $(document).ready(function() { 
     setPositionOnResize(window, "#PanelTeste"); 
    }); 
</script> 

그것은 어떤 용기 내를 중심으로 할 수있다.