Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Как выравнять страницу сайта по центру монитора

Дата:24.12.15 в 14:04
Раздел: 

В этой статье вы найдете простой метод выравнивания страницы вашего сайта по центру экрана, вне зависимости от его ширины.

Выравниваем страницу сайта по центру монитора

В наше время все больше популярности набирают широкоформатные экраны, однако веб-ресурс не всегда должен занимать ширину всего монитора. Главным образом это зависит от дизайнерского решения. Схема реализации этого решения приведена ниже:

Схема расположения страницы экрана

Решение

Реализация поставленной задачи заключается на принципе работы свойства margin – внешних отступов блока. В том случае, если блоку установить точное значение ширины, а отступы по бокам определить в автоматическом режиме (значение auto), то контейнер займет свое определенное место, установленное шириной, а оставшееся место распределится поровну для левого и правого отступа. Таким образом, достигается выравнивание блока по центру при любом значении ширины экрана. Код, на котором основывается наш способ, приведен ниже

HTML

<body>
	<div></div>
</body>

CSS

body {
	background: #eee; 
	margin:0px;
	padding:0px;
}
div {
	width: 300px; 
	height: 300px; 
	background: #5395f7;
	margin: 0px auto; 
}

Проверяем в браузере наш код

Блок по центру

В каких браузерах работает?

6.0+ 9.5+ 3.1+ 2.0+

Оценок: 2 (средняя 5 из 5)

Оценка: 
Ключевые слова: 
Понравилась статья? Расскажите о ней друзьям:

Курсы по CSS (в открытом доступе)