Img in the middle of nav - html

Question

I want to create a navigation panel like this
but I have a problem with img I can't put it in the middle
here is my code:
.leftNav {
text-align: right;
position: fixed;
width: 49%;
top: 0;
left: 0;
}
.rightNav {
position: fixed;
width: 49%;
top: 0;
right: 0;
left: auto;
}
.nav {
margin-top: 10px;
}
.nav li {
display: inline-block;
margin-left: 35px;
}
.nav li:first-child {
margin-left: 0;
}
.nav li a {
text-decoration: none;
color: white;
padding: 5px 0px;
text-transform: uppercase;
}
.wrapLogo {}
.logo {
height: 100px;
width: auto;
}
<header>
<div class="wrapNav">
<nav class="leftNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<div class="wrapLogo">
<img src="./style/img/xxx.png" alt="" class="logo">
</div>
<nav class="rightNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
</div>
</header>
Thanks for all your help 😄

Answer 1

The best and simplest solution is to use flexbox.
You should put flex on the root div (.wrapNav) then to vertically align add align-items: center;.
.wrapNav {
display: flex;
align-items: center;
justify-content: center;
}
.nav {
display: flex;
/* RESET THE LIST */
list-style: none;
padding: 0;
margin: 0;
}
.nav li a{
display: block; /* MUST BECAUSE OF THE PADDING */
text-decoration: none;
color: red;
padding:0px 5px;
text-transform: uppercase;
}
.wrapLogo {
margin: 0 10px;
}
.logo {
height: 100px;
width: auto;
}
<header>
<div class="wrapNav">
<nav class="leftNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<div class="wrapLogo">
<img src="http://via.placeholder.com/350x150" class="logo">
</div>
<nav class="rightNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
</div>
</header>

Answer 2

You can do it with the Flexbox:
body {margin: 0}
.wrapNav {
display: flex; /* displays flex-items (children) inline */
justify-content: center; /* centers them horizontally */
align-items: center; /* and vertically */
background: Aquamarine;
}
img {
display: block; /* removes bottom margin/whitespace */
width: 100%; /* responsiveness */
}
.nav {
display: flex;
justify-content: space-between;
list-style: none;
}
.nav > li {
margin: 0 15px;
}
.nav li a {
text-decoration: none;
color: #000;
padding: 5px 0px;
text-transform: uppercase;
}
/* addition */
#media (max-width: 568px) { /* adjust to your needs */
.wrapNav {flex-direction: column} /* stacks flex-items vertically */
}
<header>
<div class="wrapNav">
<nav class="leftNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<img src="http://placehold.it/200x100" alt="" class="logo">
<nav class="rightNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
</div>
</header>

Answer 3

Something like this?
.leftNav {
width:40%;
top: 0;
left: 0;
}
.rightNav {
width:40%;
top: 0;
right: 0;
left: auto;
}
.nav {
margin-top: 10px;
}
.nav li{
display: inline-block;
margin-left: 35px;
}
.nav li:first-child {
margin-left: 0;
}
.nav li a{
text-decoration: none;
color: white;
padding: 5px 0px;
text-transform: uppercase;
}
.wrapLogo {
width:20%;
}
.wrapNav{
display: flex;
}
.logo {
height: 100px;
width: auto;
}
<header style="background-color: black;">
<div class="wrapNav">
<nav class="leftNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
<div class="wrapLogo">
<img src="http://via.placeholder.com/150x150" alt="" class="logo">
</div>
<nav class="rightNav">
<ul class="nav">
<li>Menu</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</nav>
</div>
</header>