同じ行の左揃え、中央揃え、右揃えのテキスト

Question

次の条件で、HTML、CSSと同じ行に左揃え、中央揃え、右揃えのテキストを配置する方法はありますか？

1. テキストの左と右が短くなりますが、その長さは事前にわかりません。
2. テキストの中央部分は、折り返すのに十分な長さです。
3. 中央のテキストが中央に正確に表示されます。
4. テキストの中央部分は、左右のテキスト部分に重ならないようにしてください。

3つのdivを2つの左右に浮かべて使用する明らかな解決法は、中央のテキストが正確に中央に配置されない点を除いて、かなりうまく機能します（たとえば、右は中心が絶対中心の真ん中にあるように見えます）。

私はWebKitで動作するソリューションが必要です。何か案は？

編集 - これは私がこれまで持っているものです...

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

右から左の列にテキストをコピーすることで、左の列を右の幅に「トリックする」必要があります。どうして？テーブル全体に対して中心を維持するために中央の列を折り返す必要がある場合は、他の列が同じ幅であるかのように折り返す必要があります。 Resultパネルのサイズを調整することで、こちらをご覧ください：http://jsfiddle.net/brettwp/n5eSB/これは隠された内容のためにあなたのテーブルを1行高くすることに注意してください。私はあなたの実装の詳細をすべて知っているわけではないので、これをページに収めるために調整（オーバーフロー隠し、ネガティブマージン、相対位置など）を行う必要がありますが、開始する必要があります：

明確なdivタグと

<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

あなたはディスプレイでこれを達成することができますテーブル（ -row/-cell）プロパティ：

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

ソリューション

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>