Left-, center-, and right-aligned text on the same line

Question

Is there a way to have left-, center-, and right-aligned text on the same line with HTML/CSS, under the following conditions?

1. The left and right pieces of text will be short, but I do not know their length in advance.
2. The center piece of text may be long enough to wrap.
3. The center piece of text should appear EXACTLY in the center.
4. The center piece of text should not overlap the left or right pieces of text.

The obvious solution of using 3 divs with the two of them floating left and right works pretty well, except that the center piece of text is not centered exactly (for example, if the left piece of text is longer than the right, the center appears centered just right of the absolute center).

I only need a solution that works on WebKit. Any ideas?

Edit - This is what I have so far...

HTML:

<div id="left">Left</div>
<div id="center">Center text</div>
<div id="right">Right</div>

CSS:

#left {
    float: left;
    text-align: left;
    padding-right: 10px;
}

#center {
    text-align: center;
}

#right {
    float: right;
    text-align: right;
    padding-left: 10px;
}

Answer 1

solution with clear divs

https://jsfiddle.net/LaL92q88/1/

<div style="float: left">Left Text</div>
<div style="float: right">Right Text</div>
<div style="margin: 0 auto; width: 100px;">Centered Text</div>