Как задать фиксированную высоту шапки?

Question

[elena2001932]

Почему для меня не срабатывает. align-items:center, а попросту прижат к вверху.
Если я делаю допустим на padding: 36px 0; то работает. а с height нет.
Я хочу иметь фиксированную высоту шапки. Но они попросту прижимаются к вверху экрана.

<section class="header">
    <div class="container">
      <div class="center-align">
        <div class="header-logo"><a href="#!">logo</a></div>
        <div class="header-m"><span>test</span></div>
        <div class="header-buttons">
        <button>test</button>
        </div>
      </div>
    </div>
  </section>

.header { 
  width: 100%;
  height: 72px;
  position: sticky;
  z-index: 100;
  top: 0;
  background-color: black;
}
.container {
 max-width: 1280px;
 margin: 0 auto;
}
.center-align {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


a, span {
color: white;
}

Comments

[Ankhena]

Вы задаете высоту шапке. А выравниваете внутри блока .center-align, у которого высота по контенту и естественно, align-items не дает никакого результата.

[elena2001932]

Ankhena, я пробывала так:

<section class="header">
        <div class="header-logo"><a href="#!">logo</a></div>
        <div class="header-m"><span>test</span></div>
        <div class="header-buttons">
        <button>test</button>
  </section>

.header { 
  width: 100%;
  height: 72px;
  position: sticky;
  z-index: 100;
  top: 0;
  background-color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

оно тоже для меня не работает. Подскажите как мне решить эту проблемУ?

[Ankhena]

elena2001932,

оно тоже для меня не работает.

Отличная фраза. Потому что для меня и всех остальных работает:
https://codepen.io/AnnaSummer/pen/mdaZKMd

[elena2001932]

Ankhena, теперь работает xD. live-server видимо лаганул.Спасибо что открытили глаза))

Answer 1

[Ludov]

Добавь явную высоту блоку, например:
.center-align {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
}