Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выравнивание по центру (position:absolute) если изначально ширина не известна. (https://javascript.ru/forum/dom-window/36520-vyravnivanie-po-centru-position-absolute-esli-iznachalno-shirina-ne-izvestna.html)

allanmiln 18.03.2013 12:09
Выравнивание по центру (position:absolute) если изначально ширина не известна.
 
Здравствуйте!

Столкнулся с такой фигнёй: есть div со свойством position:absolute
Как можно выровнять его по центру окна браузера?
Знаю, что можно сделать отступ left:50% а потом margin-left:-ширина/2,
но что делать, если изначально ширина блока не известна (тобишь она резиновая). Может с помощью JS как-то можно это реализовать?

danik.js 18.03.2013 12:23
Выставить display:inline-block блоку и text-align:center родителю

danik.js 18.03.2013 12:25
Цитата:
Сообщение от allanmiln
Выравнивание по центру (position:absolute)
Цитата:
Сообщение от allanmiln
есть div со свойством position:relative
:-E

allanmiln 18.03.2013 12:30
ой, ошибся! :)
div absolute

allanmiln 18.03.2013 12:32
Цитата:
Сообщение от danik.js (Сообщение 241330)
Выставить display:inline-block блоку и text-align:center родителю
Пробовал, но не работает.

danik.js 18.03.2013 12:47
Цитата:
Сообщение от allanmiln
Пробовал, но не работает.
C position:absolute работать не будет.

Делайте через js. 
style.left = (parent.offsetWidth - this.offsetWidth ) / 2 + 'px'

allanmiln 18.03.2013 12:52
var width = $('#pos').offsetWidth;
возвращает undefined.

danik.js 18.03.2013 13:05
$('#pos')[0].offsetWidth или через jquery-метод $('#pos').width()

allanmiln 18.03.2013 13:07
$('#pos').width(); возвращает null,
а $('#pos')[0].offsetWidth вообще ничего не возвращает.
фигня какая-то

danik.js 18.03.2013 13:20 
<div id="pos">Бла бла бла</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script>
    alert( $('#pos').width() );
    alert( $('#pos')[0].offsetWidth );
</script>

allanmiln 18.03.2013 13:27
Да работает!
Только если поместить скрипт до элемента, то null, а если после то всё как надо.
Спасибо!

P.S. $('#pos')[0].offsetWidth точнее, чем .width()

danik.js 18.03.2013 13:39
Цитата:
Сообщение от allanmiln
Только если поместить скрипт до элемента, то null, а если после то всё как надо.
Само собой! Как можно измерить что-то, что не существует?

allanmiln 18.03.2013 13:49
Вот решение, если что:
#pos {
display:absolute:
left:50%;
}

$('#pos').css('margin-left', -$('#pos')[0].offsetWidth/2);

danik.js 18.03.2013 16:57
А обязательно блоку ставить position:absolute ?

x3zone 19.03.2013 10:39
Из контекста понял что блок резиновый.
Можно делать так.присвоить ширину блоку в процентах если ширина не указана и сделать так.
left:50%,margin-left:-ширина%/2,


Часовой пояс GMT +3, время: 21:49.