居中 <li> 沿左侧浮动元素和右侧浮动元素的元素

Question

I'm currently making a header for my webpage and well, the problem is that I can't seem to get my (what will be title image) to center inside the the image below shows my problem, Where the text: "Inlustra" is written, I would like that in the center of the Header.

Do you think I would be better off just using divs? if so how is this done? I had trouble even getting floating left and right divs earlier and then switched to an unordered list.

Here is my css:

    #header {
    position:relative;
    -webkit-box-shadow: 0px 7px 30px rgba(50, 50, 50, 1);
    -moz-box-shadow:    0px 7px 30px rgba(50, 50, 50, 1);
    box-shadow:         0px 7px 30px rgba(50, 50, 50, 1);
    z-index:10;
    width:100%;
    height:40px;
    background-color: #FFFFFF;
    border-bottom:3px solid #1C6FFF;
}

.nav li {
    margin-left:-10px;
    display: inline-block;
    list-style: none;
    text-align: center;
    min-width:100px; width: auto !important; width: 100px;
}

.centerchild {
    width:150px;
    margin-left: auto;
    margin-right: auto;
    clear:both;
}

.firstchild {
    width:50px;
    float:left;
    text-align:left;
    margin-right:1.3em;
}

.lastchild {
    width:50px;
    float:right;
    margin-left:1.3em;
    text-align: right;
}

Here is my HTML:

 <div id="header"> 
                <ul class="nav">
                    <li class="firstchild"> <i class="icon-home icon-2x"> </i> </li>
                    <li class="firstchild"> <i class="icon-inbox icon-2x"> </i> </li>
                    <li class="lastchild"> <i class="icon-twitter icon-2x"> </i> </li>
                    <li class="lastchild"> <i class="icon-facebook icon-2x"> </i> </li>
                    <li class="centerchild"> TITLE OF PAGE </li>
                </ul>
            </div>

And here is the result

Answer 1

I don't like this answer myself, but going all 1995 and using tables will at least get the job done. Since in your example the width of the elements floated left and right won't change, you could do something like this:

(Using inline styles just for brevity)

<table style="width: 100%">
  <tr>
    <td style="width: 80px">Left</td>
    <td style="text-align: center">Center</td>
    <td style="width: 80px">Right</td>
  </tr>
</table>

I really want to believe that there's a more elegant way of doing this, and I'm using tables to bait somebody else into posting it :-)