Центрируйте абсолютно позиционированный div с нефиксированной шириной

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

<div style='position:relative'>
    <div></div>
    <div style='position:absolute'>...</div>
</div>

Первый дочерний элемент div не имеет абсолютного позиционирования, чтобы передать свою высоту и ширину родительскому элементу. Второй div должен перекрывать своих братьев и сестер и располагаться по центру по горизонтали.

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

Спасибо, я сейчас спать...


html layout css center absolute
person Jorge    schedule 01.07.2010    source источник
comment
Вы можете поместить его в вертикально центрированный родительский элемент и просто применить ‹code›margin: 0 auto;‹/code› к нему (дочернему элементу), в зависимости от ситуации.   -  person reisio    schedule 01.07.2010

Ответы (3)


arrow_upward
2
arrow_downward

Ну, я не думаю, что это возможно сделать, используя только CSS, потому что для центрирования абсолютного div вам всегда нужно установить ширину, чтобы использовать -> "left: 50%; margin-left: [width/2 ]px;".

В любом случае, вы можете использовать некоторый код javascript/jQuery, чтобы получить ширину вашего div, а затем динамически установить свойство ширины CSS.

Прочтите следующее: http://api.jquery.com/width/ http://api.jquery.com/css/#css2

person Pedro Oliveira    schedule 01.07.2010

arrow_upward
0
arrow_downward

Способ сделать это будет включать небольшое количество js, хотя и не так много. Хотя сначала пройдусь по css:

Во-первых, вам нужно добавить:

left: 50%;

Это доводит конец div слева до середины страницы. Затем дайте ему класс, чтобы мы могли ссылаться на него в javascript, например:

<div style='position:relative'>
    <div class='center-absolute'>Content</div>
</div>

Таким образом, мы можем ссылаться на него в css и js. Мы используем класс, поскольку вы должны использовать идентификатор только для одного элемента.

Вот css, который вам понадобится для .center-absolute:

.center-absolute {
    position: absolute;
    left: 50%;
}

Тогда для js. Поскольку может быть несколько элементов, нам нужен цикл for для итерации между каждым из них:

var $centerAbsolute = document.getElementsByClassName('center-absolute');
for (i = 0; i < $centerAbsolute.length; i++) {
    $centerAbsolute[i].style.marginLeft = $centerAbsolute[i].offsetWidth / 2 * -1 + 'px';
}

Это перебирает все элементы с классом center-absolute и дает им отступ слева от минус половины ширины элемента, который центрирует его.

Вот рабочая демонстрация скрипки:

http://jsfiddle.net/Hive7/FqJ7T/

person Hive7    schedule 08.10.2013

arrow_upward
-1
arrow_downward

Хотя это устарело, <div align="center"> должно работать.

person Syd    schedule 01.07.2010
comment
Это центрирует содержимое внутри div, но не сам div. - person mxcl; 19.03.2013