जब मैं लपेटता हूं तब भी मैं बाएं संरेखित पाठ को कैसे केंद्रित कर सकता हूं?

Question

मुझे एक div के भीतर बाएं संरेखित पाठ के ब्लॉक को केंद्र में रखने की आवश्यकता है, लेकिन मुझे ब्लॉक ब्लॉक की दृश्य चौड़ाई की आवश्यकता नहीं है, जो ब्लॉक को स्वयं केंद्रित नहीं है।

कई मामलों में यह एक ही बात हो सकती है, लेकिन ऐसे मामले के बारे में सोचें जहां div काफी संकीर्ण है (मोबाइल चौड़ाई सोचें) और पाठ एक पंक्ति पर फिट होने के लिए बहुत लंबा है, इसलिए इसे अतिप्रवाह करने की आवश्यकता है।

नीचे दिए गए उदाहरणों में, मैं टेक्स्ट ब्लॉक को हल्के नीले रंग के रूप में दिखा रहा हूं, लेकिन व्यवहार में वे मूल div (white) के समान रंग होंगे। इस्तेमाल किए गए किसी भी पाठ में कोई लाइन ब्रेक भी नहीं है।

1a में, पाठ केवल एक ही लाइन है और यह पाठ खंड की अधिकतम चौड़ाई से छोटी है, इसलिए मैं पाठ की चौड़ाई के पाठ ब्लॉक सेट कर सकते हैं और वहाँ isn एक समस्या नहीं है।

2a हालांकि, पाठ अधिकतम चौड़ाई से अधिक लंबा है और इसलिए अगली पंक्ति में लपेटता है। इसका प्रभाव यह है कि दृश्यमान टेक्स्ट ब्लॉक अब और केंद्रित नहीं होता है।

मैं कैसे के रूप में 1b और 2b इन स्थितियों के दोनों प्रदर्शित कर सकते हैं केवल HTML और सीएसएस का उपयोग कर?

संपादित करें 1: ऐसा लगता है कि हर कोई मुझे बता रहा है कि 1 ए और 2 ए में स्थिति कैसे प्राप्त करें, लेकिन मेरे पास पहले से ही है। मैं 1 बी और 2 बी में स्थिति हासिल करना चाहता हूं।

संपादित 2: कोड जो मैं उपयोग कर रहा हूं वह वही है जैसा डेविड ने अपने लिंक (http://jsfiddle.net/davidThomas/28aef/) में दिया था। टेक्स्ट क्षेत्र के लिए रंग का उपयोग केवल इस बिंदु को स्पष्ट करने के लिए है। आप को बदलते हैं सफेद (http://jsfiddle.net/28aef/2/) को आप देख सकते हैं कि कैसे पाठ ब्लॉक नहीं रह गया है केंद्रित लग (अर्थात छोड़ दिया और सही मार्जिन बराबर नहीं हैं)

Answer 1

<div style="text-align:center;"> 
    <div style="display:inline; text-align:left; margin:20px;"> <!-- or whatever width you want that block to be at --> 
      Content here 
    </div> 
</div> 

मूल रूप से, पहले div अपने युक्त तत्व है। आपको टेक्स्ट-एलाइन केंद्र की आवश्यकता है।

फिर, अपने ब्लॉक div (नीले क्षेत्र) में, आपको इनलाइन और टेक्स्ट को संरेखित करने की आवश्यकता है, फिर एक मार्जिन सेट करें (जब आप टेक्स्ट लपेटते हैं तो उस सफेद स्थान को आप आसपास रखना चाहते हैं)।

Answer 2

मुझे पता है कि यह पुराना है, लेकिन मुझे बस एक ही समस्या थी, और मैं मानता हूं कि इनमें से कोई भी इसे हल नहीं करता है। यह 100% क्रॉस-ब्राउज़र नहीं हो सकता है (परीक्षण नहीं किया है) लेकिन यह काम करता है!

अब प्रतिबंध है कि आपको लाइन-ब्रेक में खुद को रखना होगा, लेकिन ऐसा लगता है कि इस तरह की स्थिति में ध्यान दिए बिना क्या किया जाना चाहिए।

http://jsfiddle.net/28aef/2/

div.textContainer { 
    text-align: center; 
    border: 1px solid #000; 
    height: 100px; 
    padding: 10px 0; 
} 

div.textContainer p { 
    display: inline-block; 
    text-align: left; 
} 

Answer 3

मैं इस लंबे समय से मूल पोस्टर के लिए एक गैर मुद्दा बन गया है अनुमान लगा रहा हूँ, लेकिन मैं एक ही सवाल था और एक जवाब खोजने के लिए googling किया गया था। मुझे जो मिला वह परिणाम है।

अस्वीकरण: मैं इस में से किसी एक विशेषज्ञ नहीं हूं और दूसरों के पास इस स्थिति को संभालने का एक और शानदार तरीका हो सकता है लेकिन यह मेरे आवेदन के लिए काम करता है और अन्य अनुप्रयोगों के लिए काम कर सकता है, इसलिए मुझे लगा कि मैं इसे पोस्ट करूंगा।

<div style = "text-align: center; margin-left: 10%; margin-right: 10%"> 
    <div style = "display: inline-block; text-align: left;"> 
     Desired text goes here. 
    </div> 
</div> 

ध्यान दें कि में पहली div ऊपर की जरूरत नहीं किया जा सकता है और मार्जिन कम परिवर्तन के साथ दूसरे div के लिए ले जाया जा सकता है। टैलर, आवश्यकतानुसार, प्रतिशत पर या पिक्सेल चौड़ाई निर्दिष्ट करें और आपको सभी सेट होना चाहिए। उम्मीद है कि यह किसी समय कुछ समय बचाता है और कोई नया मुद्दा नहीं बनाता है। शुभकामनाएं सभी।