Все записи с меткой ‘Margin-Top’



Размещение блока (div) по центру страницы

Для того, чтобы разместить блок (div) по центру окна браузера нам понадобится несколько сток HTML и CSS кода приведенного ниже:

CSS код:

#block-on-center {
position: absolute;
top: 50%;
left: 50%;
height: 200px;
width: 200px;
margin-top: -100px; /* значение равно половине height со знаком минус */
margin-left: -100px; /* значение равно половине width со знаком минус */
border: 1px solid #000;
}

HTML-код:

<div id="block-on-center">
<!-- здесь содержимое блока -->
</div>

Размещаем вышеприведенный код в своем HTML документе не забывая про doctype, head, body, и другие элементы. Готово!

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8 Проверено, работает!
Firefox 3.5.4 Проверено, работает!
Opera 9.64 Проверено, работает!

Twitter SEO Community Ваау! Korica Google Bookmarks Digg Закладки Yandex Myscoop Zakladok.net Reddit БобрДобр.ru Memori.ru МоёМесто.ru Mister Wong