Tekst wyrównany do lewej, środkowej i prawej strony w tej samej linii

Question

Czy istnieje sposób na wyrównanie tekstu w lewo, w środku i w prawo na tej samej linii z HTML/CSS, pod następującymi warunkami?

1. Lewy i prawy fragment tekstu będzie krótki, ale nie znam ich długości z góry.
2. Środkowy fragment tekstu może być wystarczająco długi do zawinięcia.
3. Środkowy fragment tekstu powinien wyglądać DOKŁADNIE pośrodku.
4. Środkowy fragment tekstu nie powinien zachodzić na lewy lub prawy fragment tekstu.

Oczywiste rozwiązanie polegające na użyciu 3 elementów div z dwoma z nich pływającymi w lewo i w prawo działa całkiem dobrze, z wyjątkiem tego, że środkowy fragment tekstu nie jest dokładnie wyśrodkowany (na przykład, jeśli lewy fragment tekstu jest dłuższy niż prawo, centrum wydaje się wyśrodkowane w prawo od absolutnego centrum).

Potrzebuję tylko rozwiązania działającego w WebKit. Jakieś pomysły?

Edit - To, co mam tak daleko ...

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

Będziesz musiał "oszukać" lewą kolumnę na prawo tak szeroką jak prawa, kopiując tekst z prawej do lewej kolumny. Czemu? Gdy kolumna środkowa musi się owijać, aby zachować środek względem całej tabeli, będzie ona musiała się owijać tak, jakby obie kolumny miały taką samą szerokość. Możesz to zobaczyć tutaj: http://jsfiddle.net/brettwp/n5eSB/, dostosowując rozmiar panelu Result. Zwróć uwagę, że dzięki temu Twoja tabela jest o jedną linię wyższa ze względu na ukrytą zawartość. Nie znam wszystkich szczegółów Twojej implementacji, więc musisz wprowadzić poprawki (ukryte przepełnienie, ujemne marginesy, względne położenie itp.), Aby dopasować to do strony, ale powinno zacząć się:

<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

Można to osiągnąć z wyświetlaczem: Stół (-row/-cell) properties:

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

rozwiązanie z jasnymi div

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>