How do I vertically center my navigation bar? - html

Question

After searching extensively on Stack Overflow, I have not been able to answer what really should be a simple fix: How do I center my navigation bar?
Now, before you mark this as a duplicate, please regard my code and my question.
I am trying to make a navigation bar that looks something like this.
http://computersciencenow.weebly.com/
Where the links are the the middle of the overall bar.
Here is my Nav Bar HTML:
<div id = "navbar">
<header>
<div class="nav">
<ul>
<li id="img" width = "350"><img src="res/shahind.png" alt="Shah Industries" height = "150" width = "350" /></li>
<li class="home"><a class="active" href="#">HOME</a></li>
<li class="tutorials">ABOUT</li>
<li class="about">MISSION</li>
<li class="news">CONTACT</li>
</ul>
</div>
</header>
</div>
And here is the CSS
#import url(http://fonts.googleapis.com/css?family=Maven+Pro:400);
body {
margin: 0;
padding: 0;
background: #ccc;
}
.img{
text-align: left;
}
.nav ul {
list-style: none;
background-color: #444;
padding: 0;
margin: 0;
vertical-align: middle;
overflow: hidden;
}
.nav li {
font-family: 'Maven Pro', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
text-align: center;
}
header{
vertical-align:center;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
vertical-align: middle;
margin: 0;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: pointer;
}
#img{
width:350px;
text-align: left;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
Full Code Is Here http://codepen.io/anon/pen/zGojxX

Answer 1

It can be as simple as it - vertical-align: middle;
Here is the simplified demo:
.nav {
list-style: none;
}
.nav li {
display: inline-block;
vertical-align: middle;
}
<div class="nav">
<ul>
<li><img src="//dummyimage.com/100x100" /></li>
<li class="home">HOME</li>
<li class="tutorials">ABOUT</li>
<li class="about">MISSION</li>
<li class="news">CONTACT</li>
</ul>
</div>

Answer 2

If you ever like the way another website works you can always right click and select 'view source' on it. If you do that on the website you want to copy you will see that the rest of the images are not in the list.
Here is the code the other person used. You will see that they have the images in a separate div
<div id='header'>
<div class='header-wrap'>
<div class='logo'>
<span class='wsite-logo'><a href='/'><img src='/uploads/3/9/2/2/39229753/1410676966.png' style='margin-top:1px;max-height:118px;' /></a></span>
</div>
<div class='menu'
<ul class='wsite-menu-default'><li id="active">Home</li><li id='pg551601871401491579'><a href="/our-mission.html" data-membership-required="0" >Our Mission</a></li><li id='pg551272351721461114'><a href="/private-lessons.html" data-membership-required="0" >Private Lessons</a></li><li id='pg661448056549841030'><a href="https://www.youtube.com/user/learnprogrammingCS" data-membership-required="0" target='_blank'>Youtube</a></li><li id='pg927757866254746423'><a href="/become-a-teacher.html" data-membership-required="0" >Become A Teacher</a></li><li id='pg206710261896176825'><a href="/boot-camp-for-dummies.html" data-membership-required="0" >Boot Camp for Dummies</a></li></ul>
</div>
</div>
</div>