CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 12    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 33   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

8

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

Jemand 11156
CSS

Один из многочисленных способов выравнивания блока (div) по центру страницы.
1. CSS

#center {
	top: 50%; /* Отступ в процентах от верхнего края окна */
	left: 50%; /* Отступ в процентах от левого края окна */
	width: 450px; /* Ширина блока */
	height: 450px; /* Высота блока */
	position: absolute; /* Абсолютное позиционирование блока */
	margin-top: -225px; /* Отрицательный отступ от верхнего края страницы, должен равняться половине высоты блока со знаком минус */
	margin-left: -225px; /* Отрицательный отступ от левого края страницы, должен равняться половине высоты блока со знаком минус */
}

2. HTML

<div id="center">
		<!-- Содержание блока -->
</div>

Демо

Рекламная пауза

» 8 комментариев

  1. 16 августа 2011 20:39

    Thumb up 1  Thumb down+1 0

    А если ширина блока в %?

  2. 19 августа 2011 15:51

    Thumb up 0  Thumb down0 0

    Спасибо, хороший совет.

  3. 10 января 2012 00:36

    Thumb up 0  Thumb down0 0

    вместо margin-top и margin-left писать просто top и left.

    • 10 января 2012 00:59

      Thumb up 0  Thumb down0 0

      Пример приведите…

      Вы код внимательнее посмотрите, top и left уже присутствуют, но с другими значениями…

  4. 21 января 2012 11:59

    Thumb up 0  Thumb down0 0

    если страницу изменить по высоте так, что высота дива не помещается, то смотрится коряво

    • 21 января 2012 15:26

      Thumb up 0  Thumb down0 0

      Если блок сделать резиновым, то смотрится нормально :)


Оставить комментарий