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

CSS HTML Stylus

13 февраля 2026 1 ответ

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

&lt;section class="header"&gt;     &lt;div class="container"&gt;       &lt;div class="center-align"&gt;         &lt;div class="header-logo"&gt;&lt;a href="#!"&gt;logo&lt;/a&gt;&lt;/div&gt;         &lt;div class="header-m"&gt;&lt;span&gt;test&lt;/span&gt;&lt;/div&gt;         &lt;div class="header-buttons"&gt;         &lt;button&gt;test&lt;/button&gt;         &lt;/div&gt;       &lt;/div&gt;     &lt;/div&gt;   &lt;/section&gt;

.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; }

.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; }

Дополнительно:

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

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

&lt;section class="header"&gt;         &lt;div class="header-logo"&gt;&lt;a href="#!"&gt;logo&lt;/a&gt;&lt;/div&gt;         &lt;div class="header-m"&gt;&lt;span&gt;test&lt;/span&gt;&lt;/div&gt;         &lt;div class="header-buttons"&gt;         &lt;button&gt;test&lt;/button&gt;   &lt;/section&gt;

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

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

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

elena2001932,

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

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

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

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

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Андрей PHP Ответ

9 марта 2026 в 02:41

Для задания фиксированной высоты шапки на веб-странице можно использовать CSS. Вот несколько способов сделать это:

1. Используя атрибут height в CSS:
```html

Мой заголовок

```

2. Используя класс в CSS:
```html

.header {
height: 50px;
}

```

3. Используя ID в CSS:
```html

#header {
height: 50px;
}

```

4. Используя внешний CSS файл:
```html

#header {
height: 50px;
}

```
```html

```

Выберите подход, который наиболее удобен для вас и подходит для вашего проекта. Не забудьте заменить значение 50px на нужную вам высоту шапки. Надеюсь, это поможет вам решить вашу проблему!

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ Instagram Как вставить группу полей ACF в записи после 1-го абзаца в WordPress? 0 ответов

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

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно