बाएं-, केंद्र-, और उसी पंक्ति पर दाएं संरेखित पाठ

Question

क्या निम्न स्थितियों के तहत HTML/CSS के साथ एक ही पंक्ति पर बाएं-, केंद्र- और दाएं संरेखित पाठ का कोई तरीका है?

1. पाठ के बाएं और दाएं टुकड़े कम होंगे, लेकिन मुझे उनकी लंबाई पहले से नहीं पता है।
2. पाठ का केंद्र टुकड़ा लपेटने के लिए काफी लंबा हो सकता है।
3. टेक्स्ट का केंद्र टुकड़ा केंद्र में बिल्कुल दिखाई देना चाहिए।
4. टेक्स्ट का केंद्र टुकड़ा टेक्स्ट के बाएं या दाएं टुकड़ों को ओवरलैप नहीं करना चाहिए।

उनमें से दो के साथ 3 divs का उपयोग करने का स्पष्ट समाधान बहुत अच्छी तरह से तैरता हुआ बाएं और दाएं काम करता है, सिवाय इसके कि टेक्स्ट का केंद्र टुकड़ा बिल्कुल केंद्रित नहीं है (उदाहरण के लिए, यदि टेक्स्ट का बायां टुकड़ा लंबा है सही, केंद्र पूर्ण केंद्र का केंद्र केंद्रित है)।

मुझे केवल एक समाधान की आवश्यकता है जो वेबकिट पर काम करता है। कोई विचार?

संपादित - यह क्या मैं अब तक किया है ...

HTML:

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

सीएसएस:

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

#center { 
    text-align: center; 
} 

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

Answer 1

आप की आवश्यकता होगी "चाल" अधिकार के रूप में के रूप में व्यापक किया जा रहा है, बाएं स्तंभ में सही से पाठ को कॉपी करके में बाएँ स्तंभ है। क्यूं कर? जब पूरे कॉलम के संबंध में केंद्र को बनाए रखने के लिए केंद्र कॉलम को लपेटने की आवश्यकता होती है तो उसे लपेटने की आवश्यकता होगी जैसे कि दोनों कॉलम एक ही चौड़ाई हैं। आप इसे यहां देख सकते हैं: http://jsfiddle.net/brettwp/n5eSB/Result पैनल के आकार को समायोजित करके। ध्यान दें कि छिपी हुई सामग्री के कारण यह आपकी तालिका को एक पंक्ति लंबा बनाता है। मुझे आपके कार्यान्वयन के सभी विवरण नहीं पता हैं, इसलिए आपको पेज में फ़िट होने के लिए समायोजन (ओवरफ्लो छुपा, नकारात्मक मार्जिन, स्थिति रिश्तेदार इत्यादि) बनाना होगा, लेकिन इसे आपको शुरू करना चाहिए:

<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

आप प्रदर्शन के साथ इस लक्ष्य को हासिल कर सकते हैं: तालिका (-रो/-सेल) गुण:

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

स्पष्ट 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>