ZorNet.Ru — сайт для вебмастера » HTML и CSS » Как выровнять веб-страницу с помощью CSS

Как выровнять веб-страницу с помощью CSS

Давайте рассмотрим очень простой и рабочий способ по выравниванию страницы сайта, чтоб она была корректно по центру монитора через CSS. Где ширина не будет зависеть, на любом значение можно сделать по центру. Так как в современном мире все больше предпочитают широкоформатные экраны, которые стали очень популярны. То при создании сайта иногда мы не выставляет ресурс, чтоб на любом формате он был по центру. Так как сам интернет портал не всегда обязан занимать полностью ширину задаваемого монитора.

Безусловно все зависит от дизайнерского решение, где они реализуют такую схему, что показано на изображение, которое прикреплено к материалу. Подходим в самой реализаций, что заключена на свойстве margin, который отвечает за внешнее отступы каркаса или блока.

Здесь можно сделать так, самому каркасу задаем значение, что отвечает за ширину. И сразу подключаем отступы, чтоб все автоматически поставить, то за это отвечает значение auto, где после установки каркас автоматом найдет место, которое будет поровну, как по левому, так и по правому краю. Этим мы достигаем точное выравнивание элемента по центру, где будет любое значение ширины, которое вы зададите.

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

Осталось рассмотреть способ:

HTML

Код

CSS

Код

body {
  background: #1f1d1d;
  margin:0px;
  padding:0px;
}
div {
  width: 475px;
  height: 475px;
  background: #24922d;
  margin: 0px auto;
}

После как все будет сделано, то получится как на картинке показано.

Также давайте ознакомимся еще с аналогичным методом, где расписано будет подробнее.

Чтоб понятно было, то давайте предадим фоновый оттенок, что будет блок по центру в одной гамме, а фон в другой.

Выровнять картинку относительно экрана по центру

HTML

Код

<html>
<head>
<title>Ставим страницу по центру</title>
</head>
<body>
<div id="postavit_po_tsentru"></div>
</body>
</html>

CSS

Код

*{ margin:0;
padding:0;
}
body{ background:#946a09;
}
#postavit_po_tsentru {
width:865px;
height: 580px;
margin:0 auto;
background-color:#4339f3;
}

Если говорить про браузер Internet Explorer, то ранее под него создавали различные хаки, но сейчас все корректно показывает.

14 Сентября 2018 Просмотров: 2841 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 1
Порядок вывода комментариев: CbIPoK2513 16 Сентября 2018 09:15¹ +1 Сразу скажу, что если использовать вариант margin: auto; то он не будет работать верхний и нижний отступ, но это легко пофиксить: Код .родитель {position: relative;} .элемент {position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}