Центр div горизонтально

Question

this page, я хотел бы по горизонтали центрировать главный контейнер # контейнера относительно страницы. Обычно я бы добиться этого путем добавления правила CSS,

#container { margin: 0 auto } 

Однако, расположение этой страницы (который я не писал), использует абсолютное позиционирование для #container и большинство из его дочерних элементов, так что это свойство имеет нет эффекта.

Есть ли способ достичь этого горизонтального центрирования без перезаписи макета для использования статического позиционирования? У меня нет проблем с использованием 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; 
} 

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

ширина контейнера составляет 1024px, поэтому вы можете попытаться дать левое значение 50% и margin-left: -512px.

Answer 3

Используя Javascript, это положит #контейнер в центр окна вашего браузера.

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 события:

$(document).ready(function() { 

    setMargins(); 

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

Answer 5

Если ваш главный контейнер использует absolute позиции, вы можете использовать этот 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

Этот способ работает лучше для меня. Без изменения полей, но позиция. Обязательно: объект -> margin-left: 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> 

Это может быть сосредоточена в любом контейнере.