Отцентрируйте абсолютный позиционный div с нефиксированной шириной - PullRequest
Новая
       36

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

4 голосов
/ 01 июля 2010

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

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

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

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

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

Ответы [ 3 ]

2 голосов
/ 01 июля 2010

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

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

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

0 голосов
/ 08 октября 2013

Способ сделать это будет включать в себя небольшое количество 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/

0 голосов
/ 01 июля 2010

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

...