Trung tâm div theo chiều ngang

Question

Trên this page, tôi muốn xoay ngang chính giữa #container div chính so với trang. Thông thường tôi sẽ đạt được điều này bằng cách thêm một quy tắc CSS,

#container { margin: 0 auto } 

Tuy nhiên, cách bố trí của trang này (mà tôi đã không viết), sử dụng định vị tuyệt đối cho #container và hầu hết các phần tử con của nó, vì vậy khách sạn này có không có hiệu lực.

Có cách nào tôi có thể đạt được điều này nằm ngang mà không cần viết lại bố cục để sử dụng định vị tĩnh không? Tôi không có vấn đề với việc sử dụng JavaScript/JQuery nếu đó là cách duy nhất để đạt được mục tiêu của tôi.

Answer 1

Giống như câu trả lời @rquinn nhưng điều này sẽ điều chỉnh theo chiều rộng bất kỳ. Kiểm tra demo này

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; 
} 

Javascript

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

chiều rộng vùng chứa là 1024px, vì vậy bạn có thể thử cung cấp giá trị còn lại 50% và lề trái: -512px.

Answer 3

Sử dụng Javascript, thao tác này sẽ đặt #container ở giữa cửa sổ trình duyệt của bạn.

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

Bạn có thể sử dụng cũng sử dụng jQuery:

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

Sau đó, tôi đặt mã này sau khi $(document).ready sự kiện:

$(document).ready(function() { 

    setMargins(); 

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

Answer 5

Nếu container chính của bạn đang sử dụng absolute vị trí, bạn có thể sử dụng CSS này để căn giữa nó theo chiều ngang;

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

Answer 6

Nó đơn giản. Hãy thử điều này

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

Cách này phù hợp nhất với tôi. Không thay đổi lề, nhưng vị trí. Bắt buộc: đối tượng -> lề trái: 0; và vị trí: tương đối;

kiểm tra ví dụ ở đây: jsfiddle Code:

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); 
    }); 
} 

Sử dụng:

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

Nó có thể được làm trung tâm trong bất kỳ container.