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

Question

На этой странице , я бы хотел расположить центральный div #container по горизонтали относительно страницы.Обычно я бы достиг этого, добавив правило 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

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

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

Answer 4

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

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

Answer 5

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

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 6

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

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

Answer 7

Используя Javascript, это поместит #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';