Отцентровать DIV

Тема: Отцентровать DIV

цитата
24/09/12 в 16:11

Lexikon
нужно Дивку поставить в центре страницы по горизонтале и вертикале, как сделать правильно, подскажите пожалуйста.

цитата
24/09/12 в 16:46

Alexandur
Код:

position: absolute;
top: 50%;
left: 50%;

Но с другим кодом будут нюансы.

цитата
24/09/12 в 17:34

Doctor
gimcnuk: так ведь, если не ошибаюсь, этот код гарантирует лишь то, что верхний левый угол "Дивки" будет в середине экрана?

я бы еще отрицательных краев добавил...))

position: absolute;
top: 50%;
left: 50%;
margin-left:(-50% от ширины блока);
margin-top:(-50% от высоты блока);

правда не всегда высота и ширина абсолютные значения...(

цитата
24/09/12 в 23:25

FXIX
у вертикали высота заранее известна?
у дива высота заранее известна?

если да, то
margin: 0 auto;
margin-top: тут посчитай число. вручную.

цитата
12/10/12 в 16:41

UAStudio
Это работает в случае, если высота DIV'а заранее известна. Если нет, что бывает гораздо чаще, то я бы рекомендовал использовать JQuery.

Как пример:

Код:

$(window).resize(function(){
$('.className').css({
   position:'absolute',
   left: ($(document).width() - $('.className').outerWidth())/2,
   top: ($(document).height() - $('.className').outerHeight())/2
});

});

// Для запуска функции:
$(window).resize();

Это дело выровняет тебе блок .className неизвестной высоты по центру страницы.

цитата
12/10/12 в 22:28

Камилла
А если попробовать тупо в программке выравнять? В дримвьювере вроде можно на визуальном уровне подобные вещи делать. Но это так - мысль, не факт, что верная. По 50 процентов ставить - вернее.

цитата
12/10/12 в 22:52

UAStudio

Сработает для ячейки таблицы. Давным-давно, когда деревья были ещё зелёные, девушки красивые а я молодой

именно так и делалось: создавалась таблица размером 100% на 100%, и в ней создавалась единственная ячейка имеющая параметр align=center & valign=middle.

А потом появились CSS & DIV'ная вёрстка, и это стало неактуально. Впрочем, если кто по старинке захочет, то примерный CSS-код выглядит примерно так:
Код:

CSS:
====
table{ width: 100%; height: 100%; }
table td {vertical-align: middle; text-align: center; }

HTML:
=====
<table>
<tr>
<td>
<div>Йа блокъ!</div>
</td>
</tr>
</table>

Но вообще подобное решение противоречит идеологии HTML/CSS — таблицы нужны для того, чтобы в них писать данные, а не для разметки, поэтому как-то со временем подобный стиль написания кода отмер практически везде, за исключением совсем уж глубоких запиндей.

P.S.: WYSIWYG-редакторы — это зло.

Новая тема Ответить

Эта страница в полной версии