Сохраняйте поле абсолютного позиционирования и центрирования div при изменении размера окна

У меня на странице есть несколько разделов, которые служат контейнерами. Вот пример кода CSS одного из div:

header {
    background-color: #fff;
    height: 153px;
    width: 97%;
    min-width: 1084.06px;
    margin: 15px auto;
    position: absolute;
    left: 0; 
    right: 0;
    border-radius: 20px;
}

Это центрированный контейнер для моего заголовка. Есть несколько других контейнеров, которые я стилизовал подобным образом (абсолютно, по центру и по ширине в %).

Проблема в том, что когда я изменяю размер окна, все эти контейнеры попадают в левую часть окна браузера. Я хочу сохранить некоторую маржу для определенной ширины окна. Как я могу этого добиться?

P.S. Если я добавлю margin-left, это нарушит мою центральную позицию div


css window-resize margin
person qazerty23    schedule 28.12.2016    source источник
comment
Вы можете удалить свою ширину и изменить левое и правое значение на некоторые проценты (например, 5%). Или вы можете использовать медиа-запросы (developer.mozilla.org/en -US/docs/Web/CSS/Media_Queries/)   -  person Armin    schedule 28.12.2016
comment
Спасибо @Armin, удаление ширины и добавление процентов к левому и правому значениям дали то, что я хотел! Я также узнаю о медиа-запросах!   -  person qazerty23    schedule 28.12.2016

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать медиа-запросы, медиа-запросы применяются только при определенных условиях, например, при определенной ширине.

Например, следующее правило background-color не будет применяться к экранам шириной более 480 пикселей:

@media screen and (max-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Дополнительную информацию о медиа-запросах см. на этой странице w3schools.

person Tha'er M. Al-Ajlouni    schedule 28.12.2016

arrow_upward
0
arrow_downward

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

person Coomernatior    schedule 28.12.2016