Tenho um menu e estou tentando colocra a imagem ao centro e deixar 3 links à esquerda e 3 links à direita, usei:
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Porém ele so fica alinhado na versão mobile, veja abaixo:
/*Main Menu CSS*/
*{
margin: 0;
padding: 0;
}
.header-area{
background:#4DC3CF;
}
.header-area .logotipo {
display: inline-block;
line-height: 55px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.main-menu ul{
text-align: center;
}
.main-menu ul li{
list-style:none;
display:inline-block;
position:relative;
}
.main-menu ul li a{
text-decoration: none;
display: inline-block;
font-size:18px;
padding:30px 20px;
margin:0px;
color:#fff;
font-weight: 600;
text-transform: uppercase;
transition: .4s;
}
.main-menu ul li a:hover{
color:#000;
}
/*Dropdown Menu CSS*/
.main-menu ul li ul{
position: absolute;
left:0;
top:100%;
width:200px;
z-index: 999;
transform: scaleY(0);
transform-origin: top center;
opacity:0;
visibility: hidden;
transition: .4s;
background:#4DC3CF;
box-shadow: 0 2px 8px -2px rgb(37, 39, 38);
}
.main-menu ul li:hover ul{
transform: scaleY(1);
opacity:1;
visibility: visible;
}
.main-menu ul li ul li a{
padding:14px 18px;
}
<header class="header-area">
<a href="#" class="logotipo"><img src="https://i.imgur.com/eH60XtT.png" alt="logo alt"></a>
<div class="main-menu">
<nav>
<ul>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Services</a>
<ul>
<li><a href="#">Service One</a></li>
<li><a href="#">Service Two</a></li>
<li><a href="#">Service Three</a></li>
<li><a href="#">Service Four</a></li>
<li><a href="#">Service Five</a></li>
</ul>
</li>
<li><a href="#" title="">Portfolio</a></li>
<li><a href="#" title="">Blog</a></li>
<li><a href="#" title="">Contact Us</a></li>
</ul>
</nav>
</div>
</header>
Vi post aqui e até onde entendi era pra estar alinhado por causa do top: 50% e left e translate e o display-inline-block faria ele ficar dentro, porém não funcionou.