Centre logo in between menu items

I have a menu with 3 menu items either side of a centred logo and I need the logo to be completely centred in the browser window (vertically) but as the 3 menu items either side are slightly different lengths in text I'm unable to figure out how to do this. I've hunted around the web but all the ones that I've found seem to have menu items with pretty much exact same lengths of text on either side.

Here's my initial code but as you can see I've really only managed to centre the logo and the menu but not in relation to each other.

It might also be that the menu items text changes in length so this also needs to be accounted for.

Any ideas on where to start or any help would be greatly appreciated.


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <style type="text/css">
 #branding {
 position: absolute;
 width: 100px;
 height: 100px;
 top: 20px;
 left: 50%;
 margin-left: -50px;
 background: red;
 background-size: 100% auto;
 }
 nav#access {
 display: table;
 margin: 0 auto;
 margin-top: 20px;
 }
 
 nav#access li {
 display: inline-block;
 padding: 0 30px;
 }
 
 nav#access li:nth-child(3) {
 padding-right: 80px;
 }
 
 nav#access li:nth-child(4) {
 padding-left: 80px;
 }
 </style>
</head>
<body class="">
<header id="site" class="cf">
<nav id="access">
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li id="menu-item-10" class=""><a href="#">About</a></li>
<li id="menu-item-11" class=""><a href="#">Why Shop with us</a></li>
<li id="menu-item-12" class=""><a href="#">Products</a></li>
<li id="menu-item-13" class="hspace"><a href="#">faqs</a></li>
<li id="menu-item-14" class=""><a href="#">Blog</a></li>
<li id="menu-item-15" class=""><a href="#">Contact</a></li>
</ul>
</div>
<div id="branding"></div>
</nav>
</header>
</body>
</html>

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> * { margin:0; padding:0; } nav { height:100px; background-color:#eee; } #branding { float:left; position: relative; width: 34%; height: 100px; background: red; text-align:center; line-height:100px; } #branding img { height:50px; vertical-align:middle; } nav ul { float:left; width:33%; margin-top: 30px; } nav ul li { float:left; width:33%; list-style:none; text-align:center; } </style> </head> <body class=""> <header id="site" class="cf"> <nav id="access"> <ul id="menu-menu1" class="menu"> <li id="menu-item-10" class=""><a href="#">About</a></li> <li id="menu-item-11" class=""><a href="#">Why Shop with us</a></li> <li id="menu-item-12" class=""><a href="#">Products</a></li> </ul> <div id="branding"><img src="http://www.webmasterworld.com/gfx/logo.png"></div> <ul id="menu-menu2" class="menu"> <li id="menu-item-13" class="hspace"><a href="#">faqs</a></li> <li id="menu-item-14" class=""><a href="#">Blog</a></li> <li id="menu-item-15" class=""><a href="#">Contact</a></li> </ul> </nav> </header> </body> </html>

Centre logo in between menu items

greencode

ronin

lucy24

greencode

rainborick

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week