Keep logo centered in the middle of the screen - html

Question

I am working on a navbar menu for my website, but I am stacked. The concept is to have the logo in the middle of the navbar and the three menu options from left and the other three menu from right.
<header id="top-header">
<div class="row">
<div class="large-12 columns">
<div class="logo"></div>
<ul class="menu" id="nav-menu">
<li>MENU 1</li>
<li>MENU 2</li>
<li>MENU 3</li>
<li>MENU 4</li>
<li>MENU 5</li>
<li>MENU 6</li>
</ul>
</div>
</div>
</header>
I tried to add a width to <li> with percentage like this which worked for the menu titles:
#top-header ul > li {
display: block;
float: left;
width: 16%;
position: relative;
}
However, my problem now is the image with the logo. It doesn't stay on the center of the screen. The image is the whole navbar with the logo on the middle, so I was hoping to resize vertically the image when the browser change resolution.
#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

I would include the logo as the middle list element and turn it into a faux table. This will eliminate the need to define a width for the elements within.
http://jsfiddle.net/3pf4onbj/
HTML
<header id="top-header">
<div class="row">
<div class="large-12 columns">
<ul class="menu" id="nav-menu">
<li>MENU 1</li>
<li>MENU 2</li>
<li>MENU 3</li>
<li><div class="logo"></div></li>
<li>MENU 4</li>
<li>MENU 5</li>
<li>MENU 6</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;
}