center a span amongst 4?

i've got 4 spans in a row.

<div id=container>
     <span id="1">blue</span>
     <span id="2">red</span>
     <span id="center">all colors</span>
     <span id="3">grey</span>开发者_C百科
</div>

i want to have the 'all colors' in the center of the webbrowser and the blue and red to the left of it, and the grey to the right.

how could i do this?

<div id="container">
<span class="float_l blue">blue</span>
<span class="float_l red">red</span>
<span>all colors</span>
<span class="float_r gray">grey</span> 
</div>

#container {text-align:center;overflow:hidden;}
#container span {display:block;width:auto;height:20px;line-height:20px;padding:0 10px;}
.float_l {float:left;}
.float_r {float:right;}
.blue {background:blue;}
.red {background:red;}
.gray {background:#ccc;}

If you want to have the right floated element in the same line as others you will have to put it before left floated elements.

Can you pad out each side with empty spans so #center is always middle by count?

If so, you can set each span to display: table-cell (and possibly the parent to table or table-row, don't know if that'd be required to get them to fill the width) with the same width, or at least all but #center with the same width.

Edit: Well, I've been playing with it in Firefox, and it doesn't at all do what I expected, so the only solution I can think of is scripted placement.

Edit: Actually, it kinda works with the div set with display: table and width. *shrug*