Как выровнять значок меню?
Подскажите, пожалуйста, как выровнять значок меню по вертикали?
.header-outher {
display: flex;
flex-direction: row;
max-width: 1200px;
margin: 0 auto;
}
.header-menu {
width: 33%;
display: flex;
}
.header-logo {
display: flex;
width: 33%;
font-size: 60px;
}
.header-logo span {
width: 100%;
text-align: center;
}
.header-options {
display: flex;
width: 33%;
margin: auto 0;
}
.options-list {
width: 100%;
text-align: right;
}
.header-options li {
display: inline;
}
.header-collection {
display: block;
width: 100%;
text-align: center;
}
.header-collection li {
display: inline;
}
.menu-btn {
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
}
.menu-btn span {
width: 20px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
background-color: #000;
}
.menu-btn span:nth-of-type(2) {
top: calc(50% - 7px);
}
.menu-btn span:nth-of-type(3) {
top: calc(50% + 7px);
}
.hide-menu {
display: block;
}
<header>
<div class="header-content">
<div class="header-outher">
<div class="header-menu">
<div class="menu-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="header-logo">
<span>Shop</span>
</div>
<div class="header-options">
<ul class="options-list">
<li> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg> </li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg></li>
</ul>
</div>
</div>
<div class="header-collection">
<ul class="collection-list">
<li>Новинки</li>
<li>Акции</li>
<li>Хиты продаж</li>
</ul>
</div>
<div class="hide-menu">
<h1>меню</h1>
<ul class="first-list">
<li class="list-title">Верхнее меню</li>
<li>
<a href="#" class="list-item">Каталог</a>
</li>
<li>
<a href="#" class="list-item">О Компании</a>
</li>
<li>
<a href="#" class="list-item">Контакты</a>
</li>
<li>
<a href="#" class="list-item">Доставка</a>
</li>
<li>
<a href="#" class="list-item">Оплата</a>
</li>
<li>
<a href="#" class="list-item">Личный кабинет</a>
</li>
</ul>
<ul class="contact-list">
<li class="list-title">Контакты</li>
<li class="list-item">+7(800)800-80-80</li>
<li class="list-item">г. Москва, ул. Новорязанская, 18, стр. 11</li>
</ul>
<ul class="social-list">
<li>Инстик</li>
<li>Телега</li>
<li>Ютуб</li>
<li>Вк</li>
<li>Твитер</li>
</ul>
</div>
</div>
</header>
Ответы (1 шт):
Автор решения: tomato-magnet-regulato
→ Ссылка
Способов много, один из них
.header-outher {
display: flex;
flex-direction: row;
max-width: 1200px;
margin: 0 auto;
}
.header-menu {
width: 33%;
display: flex;
}
.header-logo {
display: flex;
width: 33%;
font-size: 60px;
}
.header-logo span {
width: 100%;
text-align: center;
}
.header-options {
display: flex;
width: 33%;
margin: auto 0;
}
.options-list {
width: 100%;
text-align: right;
}
.header-options li {
display: inline;
}
.header-collection {
display: block;
width: 100%;
text-align: center;
}
.header-collection li {
display: inline;
}
.menu-btn {
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
}
.menu-btn span {
width: 20px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
background-color: #000;
}
.menu-btn span:nth-of-type(2) {
top: calc(50% - 7px);
}
.menu-btn span:nth-of-type(3) {
top: calc(50% + 7px);
}
.hide-menu {
display: block;
}
/* */
.span_capcan {
margin-top: 1em;
}
<header>
<div class="header-content">
<div class="header-outher">
<div class="header-menu">
<div class="span_capcan">
<div class="menu-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="header-logo">
<span>Shop</span>
</div>
<div class="header-options">
<ul class="options-list">
<li> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg> </li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
</svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
</svg></li>
</ul>
</div>
</div>
<div class="header-collection">
<ul class="collection-list">
<li>Новинки</li>
<li>Акции</li>
<li>Хиты продаж</li>
</ul>
</div>
</div>
</header>