Как установить определенную высоту для шапки?

Question

Anthony

stylus , html , css

Как установить определенную высоту для шапки?

Почему элементы не выровнены по центру с использованием `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>

<style>
.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;
}
</style>
```

17 октября 2023 г. 14:04

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы установить определенную высоту для шапки, вы правильно используете свойство `height` в CSS. В вашем примере шапка имеет высоту 72 пикселя, что довольно небольшая высота. Если вы хотите, чтобы элементы внутри шапки были выровнены по центру, вам необходимо использовать свойство `align-items: center` для родительского контейнера `.center-align`.

Проблема возникает из-за того, что у вас нет указанной высоты для родительского контейнера `.center-align`. По умолчанию, когда вы добавляете `align-items: center` к flex-контейнеру, содержимое выравнивается по центру по вертикали, но только в пределах доступного пространства. Если нет ограничений на высоту контейнера, содержимое будет прижато кверху. Поэтому, вам нужно задать высоту для `.center-align`.

В вашем сценарии, чтобы выровнять элементы шапки по центру, вы можете добавить `height: 100%` для `.center-align`, чтобы она занимала все доступное пространство по вертикали внутри `.header`. 

Примерно так:
```css
.header { 
  ...
}
.container {
 ...
}

.center-align {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%; /* добавьте это свойство */
}

a, span {
  color: white;
}
```

Теперь родительский контейнер `.center-align` будет занимать всю доступную высоту внутри `.header` и элементы внутри него будут выровнены по центру.

Answer 2

.display:flex;justify-content:space-between;align-items:center;height:70px;