Центр абсолютного расположения div с незафиксированной шириной

Question

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

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

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

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

Спасибо, я буду спать ...

Answer 1

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

Answer 2

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

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

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

Answer 3

способ сделать это будет включать небольшое количество 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. Как может быть несколько элементами нам нужно цикл для перебора между каждой из них:

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/