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

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

#container { margin: 0 auto }

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

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


jquery css css-position positioning
person Dónal    schedule 12.01.2011    source источник
comment
@Starx хороший вопрос, я обновил свой пост ответом (то есть да)   -  person Dónal    schedule 12.01.2011
comment
в этом случае у @rquinn есть ответ для вас   -  person Starx    schedule 12.01.2011
comment
К вашему сведению, вам нужно будет изменить положение #container на position:relative, что, по сути, вы сможете сделать, не слишком сильно влияя на вещи, если #container является самым внешним элементом.   -  person Joel Glovier    schedule 12.01.2011

Ответы (7)


arrow_upward
7
arrow_downward

То же, что и ответ @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();    
    });
});
person Starx    schedule 12.01.2011
comment
@ Дон, почему ты не принял ответ? Вам понравилось, не так ли? :D - person Starx; 15.03.2012

arrow_upward
4
arrow_downward

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

arrow_upward
1
arrow_downward

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

person kuyabiye    schedule 12.01.2011
comment
это не будет работать на экране с разрешением 800 пикселей, не так ли? или 1280, или 1360........ТАК ВКЛ - person Starx; 12.01.2011
comment
почему нет? вы можете попробовать изменить размер окна. - person kuyabiye; 12.01.2011
comment
это будет работать на больших экранах, но на меньших пользователь не сможет увидеть изображение целиком. (Он не сможет прокручивать их в поле зрения) - person Dan; 12.01.2011

arrow_upward
0
arrow_downward

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

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

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

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;
}
person Mikul Gohil    schedule 12.01.2011
comment
Но будет ли это работать, если #Content и его дочерние элементы абсолютно позиционированы? - person Dónal; 12.01.2011
comment
это будет работать даже для дочернего элемента, если возможно, можете ли вы дать мне более подробную информацию - person Mikul Gohil; 12.01.2011

arrow_upward
-1
arrow_downward

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

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

person Community    schedule 03.09.2015