Move links within a navbar - html

Question

Hey I have a navbar with a brand img in the middle but the image is bigger than the actual text in the links. I want to have the links )on both sides of the brand img) to line up with the middle of the brand (vertical halfway point) I tried playing with margin and padding but it doesn't seem to be doing the trick.
HTML of Navbar:
<div class="nav">
<div class="li">
<a class="nav-link" href="#">PHOTOGRAPHER</a>
<a class="nav-link" href="#">PORTFOLIO</a>
<a class="hplogo-a" href=""><img class="hplogo-size" src="Images/Logo-Black - Copy.png" alt=""></a>
<a class="nav-link" href="#">INVESTMENT + FAQ</a>
<a class="nav-link" href="#">BLOG</a>
</div>
</div>
Related CSS (note I reset the container size and not the logo because when I did the logo there was empty space on both sides since the was remaining the same):
.nav{
list-style-type: none;
overflow:hidden;
display: inline;
}
.li{
text-align: center;
}
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
.resize-anchor{
display: inline-block;
height: auto;
width: 300px;
}
.hplogo-a{
display: inline-block;
height: auto;
width: 200px;
}
a{
display:inline-block;
color:black;
text-decoration: none;
white-space: nowrap;
}
a:hover{
color:#D1946F;
text-decoration: none;
}
a:link{
color:#D1946F;
text-decoration: none;
}
.nav-link{
margin:0px 10px 30px 10px;
font-family: Calibri;
font-size: 18px;
font-style: normal;
font-variant: normal;
line-height: 26.4px;
padding: 0px 10px 0px 10px;
margin-top: 20px;
}

Answer 1

This looks like a job for a flex box!
Simply give your nested div the class flex-container and its as the class flex-item...
<div class="nav">
<div class="li flex-container">
<a class="nav-link flex-item" href="#">PHOTOGRAPHER</a>
<a class="nav-link flex-item" href="#">PORTFOLIO</a>
<a class="hplogo-a flex-item" href=""><img class="hplogo-size" src="https://seeklogo.com/images/H/hp-logo-EEECF99DCE-seeklogo.com.png" alt=""></a>
<a class="nav-link flex-item" href="#">INVESTMENT + FAQ</a>
<a class="nav-link flex-item" href="#">BLOG</a>
</div>
</div>
and set the following properties to your page's css...
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
..and voila!
I strongly recommend clicking here for more info on flex boxes, as they are incredibly useful.
Here's the code in action (I suggest running it in full-page):
.flex-container {
display: flex;
display: -webkit-flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
margin: 5px;
}
<div class="nav">
<div class="li flex-container">
<a class="nav-link flex-item" href="#">PHOTOGRAPHER</a>
<a class="nav-link flex-item" href="#">PORTFOLIO</a>
<a class="hplogo-a flex-item" href=""><img class="hplogo-size" src="https://seeklogo.com/images/H/hp-logo-EEECF99DCE-seeklogo.com.png" alt=""></a>
<a class="nav-link flex-item" href="#">INVESTMENT + FAQ</a>
<a class="nav-link flex-item" href="#">BLOG</a>
</div>
</div>
I used a rather large logo image to better accentuate the vertical alignment.

Answer 2

Sir hopefully my answer is helpful for you what i get it you want a navigation in the middle of your navigation bar
<div class="navbar">
<nav class="nav">
<ul class="ul">
<li> <a class="nav-link" href="#">PHOTOGRAPHER</a></li>
<li><a class="nav-link" href="#">PORTFOLIO</a></li>
<li><a class="hplogo-a" href=""><img class="hplogo-size" src="https://s-media-cache-ak0.pinimg.com/originals/fb/76/5b/fb765b8752d50de50cfa15203f9a7acd.png" alt=""></a></li>
<li><a class="nav-link" href="#">INVESTMENT + FAQ</a></li>
<li><a class="nav-link" href="#">BLOG</a></li>
</ul>
</nav>
</div>
here is css
.navbar{float: left;width: 100%;position: relative;}
.nav{float: left;position: absolute;left:50%;transform:translate(-50% , 0 );}
.hplogo-size{width:50px;height:50px;}
.nav ul{list-style:none;}
.nav ul li{text-decoration: none;display: inline-block;}
here is Fiddle