Для реализации вертикальных полос по бокам логотипа в меню, где полосы занимают всю высоту, можно использовать CSS. Один из простых способов сделать это — использовать псевдоэлементы `::before` и `::after` для создания вертикальных бордеров. Таким образом, вы не будете зависеть от верхнего и нижнего отступов (padding) и сможете добиться необходимого эффекта.
Вот пример кода, который иллюстрирует данное решение:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Меню с бордерами</title>
<style>
body {
margin: 0;
}
.menu {
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: auto; /* высота будет изменяться в зависимости от содержимого */
padding: 10px 20px; /* Отступы для меню */
background-color: #f0f0f0; /* Фоновый цвет меню */
}
.menu::before,
.menu::after {
content: '';
position: absolute;
top: 0;
bottom: 0; /* Задаем высоту на всю высоту родителя */
width: 2px; /* Ширина бордеров */
background-color: #000; /* Цвет бордеров */
}
.menu::before {
left: 0; /* Позиционирование слева */
}
.menu::after {
right: 0; /* Позиционирование справа */
}
.logo {
margin: 0 20px; /* Отступы вокруг логотипа */
}
.menu-items {
display: flex;
gap: 10px; /* Расстояние между пунктами меню */
}
</style>
</head>
<body>
<div class="menu">
<div class="logo">Логотип</div>
<div class="menu-items">
<div>Пункт 1</div>
<div>Пункт 2</div>
<div>Пункт 3</div>
</div>
</div>
</body>
</html>
```
### Объяснение кода:
1. **Центрирование элементов**: Мы используем `display: flex;`, `align-items: center;` и `justify-content: center;` в классе `.menu`, чтобы все элементы (логотип и пункты меню) находились по центру по вертикали и горизонтали.
2. **Создание бордеров**: Псевдоэлементы `::before` и `::after` добавляются для создания вертикальных бордеров. Мы устанавливаем их `top: 0;` и `bottom: 0;`, чтобы они занимали всю высоту родителя (меню).
3. **Адаптивность**: Высота меню будет изменяться в зависимости от количества пунктов, так как мы не указываем фиксированную высоту. Это позволяет содержимому управлять высотой элемента.
4. **Визуальный стиль**: Цвета, отступы и ширина бордеров легко изменить в CSS под ваши нужды.
Этот подход позволяет добиться нужного эффекта, сохраняя при этом гибкость в дизайне вашего меню.