Держите логотип в центре экрана

Question

Я работаю над навигационным меню для своего веб-сайта, но у меня сложены. Концепция заключается в том, чтобы логотип находился в середине навигационной панели и три параметра меню слева и в остальных трех меню справа.

<header id="top-header"> 
    <div class="row"> 
    <div class="large-12 columns"> 
     <div class="logo"></div> 
     <ul class="menu" id="nav-menu"> 
     <li><a href="#">MENU 1</a></li> 
     <li><a href="#">MENU 2</a></li> 
     <li><a href="#">MENU 3</a></li> 
     <li><a href="#">MENU 4</a></li> 
     <li><a href="#">MENU 5</a></li> 
     <li><a href="#">MENU 6</a></li> 
    </ul> 
    </div> 
    </div> 
</header> 

Я пытался добавить ширину <li> с процентом, как это работавшей для заголовков меню:

#top-header ul > li { 
    display: block; 
    float: left; 
    width: 16%; 
    position: relative; 
} 

Однако моя проблема сейчас является изображение с логотипом. Он не остается в центре экрана. Изображение - это весь навигатор с логотипом посередине, поэтому я надеялся изменить размер изображения по вертикали, когда разрешение на изменение браузера.

#top-header .logo { 
    background-color: transparent; 
    background-image: url("img/menubar_logo.png"); 
    height: 100%; 
    padding-left: 10px; 
    position: absolute; 
    transition: all 0.3s ease 0s; 
    width: 100%; 
    z-index: 1; 
} 

Answer 1

Я бы включил логотип в качестве элемента среднего списка и превратил его в таблицу faux. Это избавит вас от необходимости определять ширину элементов внутри.

http://jsfiddle.net/3pf4onbj/

HTML

<header id="top-header"> 
    <div class="row"> 
    <div class="large-12 columns"> 
     <ul class="menu" id="nav-menu"> 
     <li><a href="#">MENU 1</a></li> 
     <li><a href="#">MENU 2</a></li> 
     <li><a href="#">MENU 3</a></li> 
     <li><div class="logo"></div></li> 
     <li><a href="#">MENU 4</a></li> 
     <li><a href="#">MENU 5</a></li> 
     <li><a href="#">MENU 6</a></li> 
     </ul> 
    </div> 
    </div> 
</header> 

CSS

.logo { 
    width:100px; 
    height:30px; 
    background:#ff0; 
} 
#top-header ul { 
    display:table; 
    width:100%; 
    margin:0; 
    padding:0; 
} 
#top-header ul > li { 
    display: table-cell; 
    vertical-align:middle; 
    margin:0; 
    padding:0; 
    text-align:center; 
} 
#top-header ul > li a { 
    display:block; 
    padding:3px 5px; 
}