I am trying to center an image between to divs. the divs are floating left and right.

latest html:
<div id="headerbar">
<div id="menu">
<div id="headernav"><a href="index.html">home</a></div>
<div id="headernav"><a href="portfolio.html">portfolio</a></div>
<div id="headernav"><a href="services.html">services</a></div>
<div id="headerimage"><img src="images/iconlogo.png" alt="icon logo" /></div>
<div id="headernav2"><a href="about.html">about</a></div>
<div id="headernav2"><a href="blog.html">blog</a></div>
<div id="headernav2"><a href="contact.html">contact</a></div>
</div>
</div>

and css:
#headerbar {
background:url(../images/header3.jpg);
height:225px;
width:100%;}
#headerimage {
float: left;}
#headernav {
float:left;
padding-left:20px;
padding-right:20px;}
#headernav2 {
float:right;
padding-left:20px;
padding-right:20px;}
#menu {
display: inline;
width:100%;
height: 90px;
margin:0px;}

thanks for any help