Горизонтальное центрирование сайта

В последнее время разрешение мониторов у пользователей растёт семимильными шагами.

И если сейчас принято верстать под 1024 px, реже под 1280 px, то большой процент пользователей уже сидит на разрешениях экрана от 1440 px и выше. Сейчас уже никого не удивишь домашним монитором с разрешением 1600 px.

Заходя на сайты, созданные в конце девяностых — начале двухтысячных под таким монитором, бесит, что верстальщики даже не соизволили выровнять сайт посередине экрана. Пример можно увидеть на сайте «Порту Атриум»

Мне известно пара способов, чтобы выровнять сайт посередине экрана.

Способ первый

HTML:

<html>
    <head>...</head>
    <body>
       <div class="wrapper">...</div>
    </body>
</html>

CSS:

body {
    text-align: center;
}
.wrapper {
    margin: 0px auto;
    width: 1000px;
    text-align: left;
}

Способ второй

CSS:

.wrapper {
    position: absolute;
    left: 50%;
    width: 1000px;
    margin-left: -500px;
}

Источник: https://www.kobzarev.com/programming/horizontal-centering-site/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: