center a span amongst 4?

Question

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>
</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?

Answer 1

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*

Answer 2

<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.