Как вертикально центрировать мою навигационную панель?

Question

После тщательного поиска по переполнению стека, я не смог ответить, что действительно должно быть простым исправлением: как я могу сосредоточить свою навигационную панель?

Теперь, прежде чем отмечать это как дубликат, пожалуйста, обратите внимание на мой код и мой вопрос.

Я пытаюсь сделать панель навигации, которая выглядит примерно так. http://computersciencenow.weebly.com/

Где ссылки являются средой общей полосы.

Вот мой 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"><a href="#">ABOUT</a></li> 
         <li class="about"><a href="#">MISSION</a></li> 
         <li class="news"><a href="#">CONTACT</a></li> 
        </ul> 
       </div> 
      </header> 
     </div> 

А вот 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; 
    } 

Полный код Вот http://codepen.io/anon/pen/zGojxX

Answer 1

Это может быть так просто, как это - vertical-align: middle;

Вот упрощенная демо:

.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"><a href="#">HOME</a></li> 
 
     <li class="tutorials"><a href="#">ABOUT</a></li> 
 
     <li class="about"><a href="#">MISSION</a></li> 
 
     <li class="news"><a href="#">CONTACT</a></li> 
 
    </ul> 
 
</div>

Answer 2

Если вы когда-нибудь, как на пути другой веб-сайт работает, Вы можете всегда щелкните правой кнопкой мыши и выберите «просмотреть источник» на нем. Если вы сделаете это на веб-сайте, который хотите скопировать, вы увидите, что остальная часть изображений отсутствует в списке.

Введите код, который использует другой человек. Вы увидите, что у них есть изображения в отдельном 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"><a href="/">Home</a></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>