Позиционирование элементов на сайте

Question

делая очередной прототип, столкнулся с проблемой позиционирования элементов на экране. Хочу сделать текст по середине, а нижнюю белую полосу с отступом в 25 пикселей от низа элемента с помощью флекс бокса. Но элементы в флексе позиционируются относительно размеров друг друга и текст все же чуть-чуть уезжает наверх относительно центра. Как изменить их позиционирования, что бы при адаптации они никуда не съезжали, как при '''position: absolute;'''

.header {
  height: 100vh;
  width: 100%;
  max-width: 1920px;
  max-height: 1080px;
  min-height: 700px;
  min-width: 1000px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../image/img1.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  margin: auto;
}

.header__box {
  height: 100vh;
  width: 1000px;
  /*background-color: grey;*/
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  color: white;
}

.box__text {
  margin: auto;
  font-size: 140px;
  font-family: 'Comforter', cursive;
  color: white;
}

.scroll-bar {
  height: 5px;
  width: 300px;
  background-color: rgba(255, 255, 255, 0.7);
  margin: auto;
  margin-bottom: 25px;
  border-radius: 25px;
}

<header class="header">
  <div class="header__box">
    <h1 class="box__text" -->
      Bacla Sound Music
    </h1>
  </div>
  <div class="scroll-bar">
  </div>
</header>

Answer 1

Применение margin: auto не всегда уместно. Отсюда и начинается путаница с позиционированием. Из опыта рекомендую обнулять все отступы изначально.
flex работает точнее, если указывать ему все свойства, т.е. ему нужно понимать как позиционировать элемент по вертикальной оси и горизонтальной. По этому всегда указывайте justify-content. Это направление основной оси. Если column - вертикальная ось, row - горизонтальная. Ну и align-items - это второстепенная ось.

Таким образом мы обнулив все отступы задаем общему предку свойства:

.header {
    display: flex;
      flex-direction: column; //указывает, что главная ось вертикальная
      justify-content: center; // центрируем по вертикальной(главной) оси 
    align-items: center; // центрируем по горизонтальной(второстепенной) оси
}

далее обнуляем все margin кроме отступа полоски, ему мы задаем margin: 0 auto, что бы элемент был центрирован за счет отступов, так как элемент блочный и не занимает всю ширину. Хотя в нашем случае можно тоже 0 указать, так как flex его центрирует и так.

По итогу имеем такие стили:

.header {
  height: 100vh;
  width: 100%;
  max-width: 1920px;
  max-height: 1080px;
  min-height: 700px;
  min-width: 1000px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../image/img1.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.header__box {
  height: auto;
  width: 1000px;
  /*background-color: grey;*/
  margin: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  color: white;
}

.box__text {
  margin: 0;
  font-size: 140px;
  font-family: 'Comforter', cursive;
  color: white;
}

.scroll-bar {
  height: 5px;
  width: 300px;
  background-color: rgba(255, 255, 255, 0.7);
  margin: 0 auto;
  border-radius: 25px;
}

БЛОГ НА HUSL

Позиционирование элементов на сайте

Ответы (1 шт):