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

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

#container { margin: 0 auto }

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

Есть ли способ достичь этого горизонтального центрирования без перезаписи макета для использования статического позиционирования? У меня нет проблем с использованием JavaScript/JQuery, если это единственный способ достичь моей цели.

7 ответов

То же, что и @******, но это будет настраиваться на любую ширину. Проверьте это демо

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

HTML:

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


Вы также можете использовать 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(); 
 });
});


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


Если ваш основной контейнер использует позицию absolute, вы можете использовать этот CSS, чтобы центрировать его по горизонтали;

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


Используя 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';


Это просто. Попробуйте это

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


Этот способ работал лучше всего для меня. Без изменения полей, но позиция. Необходимые: object → 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);
 });
}

Использование:

Он может быть центрирован в любом контейнере.

licensed under cc by-sa 3.0 with attribution.