Văn bản bên trái, giữa và văn bản phải trên cùng một dòng

Question

Có cách nào để có văn bản bên trái, trung tâm và căn phải trên cùng một dòng với HTML/CSS, trong các điều kiện sau không?

1. Phần văn bản bên trái và bên phải sẽ ngắn, nhưng tôi không biết trước về độ dài của chúng.
2. Đoạn văn bản trung tâm có thể đủ dài để gói.
3. Đoạn văn bản trung tâm sẽ xuất hiện CHÍNH XÁC ở chính giữa.
4. Đoạn văn bản trung tâm không được chồng lấp phần văn bản bên trái hoặc bên phải.

Giải pháp rõ ràng khi sử dụng 3 divs với hai phần tử nổi bên trái và bên phải hoạt động khá tốt, ngoại trừ phần trung tâm của văn bản không được căn giữa chính xác (ví dụ, nếu phần văn bản dài hơn bên phải, trung tâm xuất hiện ở giữa bên phải của trung tâm tuyệt đối).

Tôi chỉ cần một giải pháp hoạt động trên WebKit. Ý tưởng nào?

Sửa - Đây là những gì tôi có cho đến nay ...

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ạn sẽ cần phải "lừa" cột bên trái thành rộng như bên phải, bằng cách sao chép văn bản từ bên phải sang cột bên trái. Tại sao? Khi cột trung tâm cần bọc để duy trì trung tâm đối với toàn bộ bảng, nó sẽ cần bọc như thể cả hai cột khác có cùng chiều rộng. Bạn có thể thấy điều này tại đây: http://jsfiddle.net/brettwp/n5eSB/ bằng cách điều chỉnh kích thước của bảng điều khiển Result. Lưu ý rằng điều này làm cho bảng của bạn cao hơn một dòng do nội dung ẩn. Tôi không biết tất cả chi tiết về việc triển khai của bạn, vì vậy bạn sẽ cần phải điều chỉnh (tràn ẩn, lề tiêu cực, vị trí tương đối, v.v.) để làm cho trang này vừa với trang, nhưng bạn nên bắt đầu:

<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

Bạn có thể đạt được điều này với màn hình hiển thị: bảng (-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

giải pháp với divs rõ ràng

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>