В этой статье вы найдете простой метод выравнивания страницы вашего сайта по центру экрана, вне зависимости от его ширины.
В наше время все больше популярности набирают широкоформатные экраны, однако веб-ресурс не всегда должен занимать ширину всего монитора. Главным образом это зависит от дизайнерского решения. Схема реализации этого решения приведена ниже:
Решение
Реализация поставленной задачи заключается на принципе работы свойства 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+ |
