Texto alineado a la izquierda, centro y a la derecha en la misma línea

Question

¿Hay alguna manera de tener texto alineado a la izquierda, centro y derecha en la misma línea con HTML/CSS, en las siguientes condiciones?

1. Las piezas de texto izquierda y derecha serán cortas, pero no sé su longitud con antelación.
2. La pieza central de texto puede ser lo suficientemente larga como para envolverla.
3. La pieza central de texto debe aparecer EXACTAMENTE en el centro.
4. La pieza central de texto no debe solaparse con los textos de la izquierda o la derecha.

La solución obvia de usar 3 divs con los dos fl otados a izquierda y derecha funciona bastante bien, excepto que la pieza central de texto no está centrada exactamente (por ejemplo, si la parte izquierda del texto es más larga que la derecha, el centro aparece centrado justo a la derecha del centro absoluto).

Solo necesito una solución que funcione en WebKit. ¿Algunas ideas?

Editar - esto es lo que tengo hasta ahora ...

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

Tendrá que "truco" de la columna de la izquierda a ser tan ancha como el derecho, mediante la copia del texto de la derecha en la columna izquierda. ¿Por qué? Cuando la columna central necesita envolverse para mantener el centro con respecto a toda la mesa, tendrá que envolverse como si las otras dos columnas tuvieran el mismo ancho. Puede ver esto aquí: http://jsfiddle.net/brettwp/n5eSB/ ajustando el tamaño del panel Result. Tenga en cuenta que esto hace que su tabla sea una línea más alta debido al contenido oculto. No conozco todos los detalles de su implementación, por lo que tendrá que hacer ajustes (desbordamiento oculto, márgenes negativos, posición relativa, etc.) para que esto encaje en la página, pero debe comenzar:

<table> 
    <tr> 
     <td class="d1"> 
      left 
      <div class="copy">right text</div> 
     </td> 
     <td class="d2"> 
      center text that is long enough to force a word wrap! 
     </td> 
     <td class="d3">right text</td> 
    </tr> 
</table> 

table { 
    width: 100%; 
} 
td { 
    vertical-align: top; 
} 
.d1 { 
    text-align: left; 
} 
.d2 { 
    text-align:center; 
} 
.d3 { 
    text-align:right; 
} 
.copy { 
    visibility: hidden; 
} 
.copy, .d3 { 
    white-space: nowrap; 
} 

Answer 2

se puede lograr esto con la pantalla: mesa (-row/-cell) propiedades:

http://jsfiddle.net/WYxek/

<div class="table"> 
    <div class="tr"> 
     <div class="d1">left text</div> 
     <div class="d2">center text</div> 
     <div class="d3">right text</div> 
    </div> 
</div> 



.table { 
    display:table; 
    width:100%; 
} 
.tr { 
    display:table-row; 
} 
.d1 { 
    display:table-cell; 
    width:25%; 
} 
.d2 { 
    display:table-cell; 
    text-align:center; 
    width:50%; 
} 
.d3 { 
    display:table-cell; 
    text-align:right; 
    width:25%; 
} 

Answer 3

solución con divs claras

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>