CSS Горизонтальные элементы центра на странице с использованием поля


пример

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

Мы добавляем значение ширины, которое меньше ширины окна, и свойство auto margin затем распределяет оставшееся пространство влево и вправо:

#myDiv {
 width:80%;
 margin:0 auto;
}

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

В приведенном выше примере элемент #myDiv имеет ширину 80%, что оставляет 20% оставшегося. Браузер распространяет это значение на оставшиеся стороны так:

(100% - 80%) / 2 = 10%