सीएसएस: केंद्र ब्लॉक, लेकिन बाईं ओर सामग्री संरेखित करें

81

मैं चाहता हूं कि एक पूरा ब्लॉक इसके मूल में केंद्रित हो, लेकिन मैं चाहता हूं कि ब्लॉक की सामग्री को संरेखित किया जाए।

उदाहरण सबसे अच्छी सेवा करते हैं

इस पृष्ठ पर :

http://yaml-online-parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f77c%7c%5c% 2f% 7c% 7c% 0d% 0a ++% 2f% 2f +% 7c% 7c ++% 7c% 7c __% 0d% 0a & प्रकार = अजगर

ascii कला को केंद्रित किया जाना चाहिए (जैसा कि यह प्रतीत होता है) लेकिन इसे लाइन करना चाहिए और "YAML" जैसा दिखना चाहिए।

या यह :

http://yaml-online-parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++++hicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23 % 0d% 0a% 0d% 0a% 3f +% 5b + New + York + Yankees% 2c% 0d% 0a +++++ अटलांटा + बहादुरों +% 5d% 0d% 0a% 3a /% 5b + 2001-07-02% 2c + 2001-08-12% 2c% 0d% 0a ++++ 2001-08-14 +% 5d% 0d% 0a

त्रुटि संदेश सभी पंक्तिबद्ध होना चाहिए क्योंकि यह कंसोल में होता है।

css alignment center

— पॉल टारजन
स्रोत

163

सबसे पहले, एक अभिभावक बनाएं जो divअपने बच्चे की सामग्री को केंद्र में रखता है text-align: center। इसके बाद, एक बच्चा बनाएं जो अपने बच्चों की चौड़ाई के अनुकूल होने के लिए divउपयोग करता display: inline-blockहै और text-align: leftसामग्री को वांछित के रूप में बाईं ओर संरेखित करता है।

<div style="text-align: center;">
    <div style="display: inline-block; text-align: left;">
        Centered<br />
        Content<br />
        That<br />
        Is<br />
        Left<br />
        Aligned
    </div>
</div>

स्निपेट का विस्तार करें

— केवॉन
स्रोत

5

स्पष्ट और प्रभावी। धन्यवाद!

— फजीबीयर3965

11

जैसे ही पाठ की एक भी पंक्ति एक पंक्ति में नहीं बैठती है, वह पाठ को लपेटता है और परिणाम पूर्ण चौड़ाई में होता है, लेकिन पाठ पूरी चौड़ाई से कम होता है, इसलिए भले ही यह ब्लॉक केंद्रित हो। पाठ से ब्लॉक की पूरी चौड़ाई नहीं है क्योंकि t मामला। एक उदाहरण के लिए देखें stackoverflow.com/questions/8702802/…

— user3338098

सरल और सुंदर! धन्यवाद

— सीजर Bielich

3

@ user3338098 यह काम करता है, आपके मामले में ब्लॉक को एक अवांछित आकार में विस्तारित होने से रोकने के लिए आपको अपने पाठ के लिए अधिकतम चौड़ाई निर्धारित करने की आवश्यकता है। मैंने शाब्दिक रूप से अपने काम के लिए बस यही तर्क लागू किया था और आरेख 1 बी + 2 बी प्राप्त करने में सक्षम था।

— मार्क

20

दूसरे प्रश्न से काम का उत्तर देना: कैसे एक चर चौड़ाई के अस्थायी तत्व को केंद्र में रखा जाए?

उस तत्व को मान लेना जो तैरता है और केन्द्रित होगा, एक id = "सामग्री" के साथ एक div है ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

और निम्नलिखित सीएसएस लागू करें

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

यहाँ इस बारे में एक अच्छा संदर्भ है कि http://dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats

— पॉल टारजन
स्रोत

इसके अलावा "रैप" होने preऔर "सामग्री" के साथ बहुत अच्छा काम करता है code।

— सर्ज स्ट्रोबंड्ट

तब से काम नहीं करता है जब तक This will be centeredएक पंक्ति में फिट नहीं होता है यह पाठ को लपेटता है और परिणाम पूरी चौड़ाई में होता है, लेकिन पाठ पूरी चौड़ाई से कम होता है, इसलिए भले ही ब्लॉक केंद्रित हो लेकिन इससे कोई फर्क नहीं पड़ता पाठ युक्त ब्लॉक की पूरी चौड़ाई नहीं है। एक उदाहरण के लिए stackoverflow.com/questions/8702802/… के आरेख 2a देखें ।

— user3338098

नकारात्मक मूल्यों का उपयोग करने से बचने की कोशिश करें! यह सभी ब्राउज़रों में सही ढंग से काम नहीं करेगा।

— ग्रासपर

4

यदि मैं आपको अच्छी तरह से समझता हूं, तो आपको एक कंटेनर (या ब्लॉक) को केंद्र में रखने की आवश्यकता है

margin-left: auto;
margin-right: auto;

और बाईं ओर संरेखित करें यह सामग्री है:

text-align: left;

— eKek0
स्रोत

इसलिए, मैं अपने <प्री> और <कोड> पर क्या डालूं? मैं उस पर बदलाव की कोशिश की है और विफल रहा है।

— पॉल टार्जन

क्या आपने सीएसएस क्लास का उपयोग करने की कोशिश की?

— eKek0

इसके अलावा, आप

— eKek0

2

मैं एक कंटेनर डिव की कोशिश कर रहा हूं, और इसे काम करने का एकमात्र तरीका निश्चित चौड़ाई (जो मुझे नहीं चाहिए) है।

— पॉल टार्जन

2

आम तौर पर आपको मार्जिन का उपयोग करना चाहिए: 0 ऑटो पर अन्य उत्तरों में बताए अनुसार, लेकिन आपको div के लिए एक चौड़ाई निर्दिष्ट करनी होगी। यदि आप ऐसी चौड़ाई निर्दिष्ट नहीं करना चाहते हैं जो आप या तो कर सकते हैं (यह इस बात पर निर्भर करता है कि आप क्या करने की कोशिश कर रहे हैं) मार्जिन का उपयोग करें, जैसे कुछ मार्जिन: 1 पीएक्स 2 पी; , यह आपकी सामग्री को ऐसा लगता है जैसे कि यह केंद्रित है, आप मेरे प्रश्न के लिए Leyu का उत्तर भी देख सकते हैं

— वलीद आइसा
स्रोत

दुख की बात है कि आपका समाधान एक मजबूर क्षैतिज स्क्रॉलबार के साथ एक अतिप्रवाह बनाता है। ओवरफ़्लो जोड़ना: मूल तत्व में छिपा हुआ अच्छा नहीं है क्योंकि मेरा आउटपुट स्क्रॉल बार को वारंट करने के लिए काफी लंबा हो सकता है। क्षमा करें :(

— पॉल टार्जन

वास्तव में यह मेरा समाधान नहीं है जैसा कि मैंने उल्लेख किया है, लेकिन वैसे भी, मुझे वह नहीं मिलता है जिसका आप अतिप्रवाह करते हैं: छिपी हुई मजबूर स्क्रॉलबार, यह उन सामग्री को छिपाना चाहिए जो स्क्रॉलबार को मजबूर नहीं करती हैं।

— इलिसा

आपकी पोस्ट में समाधान क्षैतिज स्क्रॉलबार का कारण बनता है क्योंकि सामग्री वास्तव में दाईं ओर 50% स्थानांतरित हो जाती है। इसके लिए एक अतिप्रवाह की आवश्यकता होती है: हटाने के लिए जो मेरे लिए काम नहीं करता है।

— पॉल टार्जन

2

मैंने एक कंटेनर के अंदर पाठ और बाएं-संरेखित पाठ का सबसे आसान तरीका पाया है:

HTML:

<div>
  <p>Some interesting text.</p>
</div>

सीएसएस:

P {
  width: 50%; //or whatever looks best
  margin: auto; //top and bottom margin can be added for aesthetic effect
}

आशा है कि आप इसे देख रहे थे क्योंकि इसने मुझे इस बहुत ही बुनियादी समाधान का पता लगाने के लिए काफी खोज की थी।

— एल.गंट
स्रोत

1

<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>

— अंबर
स्रोत

इसके अलावा, मुझे चौड़ाई नहीं चाहिए: 400px। उसके बिना संभव है?

— पॉल टार्जन

समस्या यह है कि जब तक आप इस पर एक सीमा नहीं लगाते हैं, तब तक सबसे बड़ी चौड़ाई को भरने के लिए एक ब्लॉक-स्तरीय तत्व का विस्तार होगा।

— अंबर

इसलिए, मैं जो करना चाहता हूं वह असंभव है?

— पॉल टार्जन

यह हो सकता है कि कोई ऐसा रहस्य जानता हो जिसके बारे में मैं नहीं जानता, लेकिन मेरे ज्ञान को, हाँ।

— एम्बर

मैं दाव से सहमत हूं। शायद, आप छोटे HTML या किसी अन्य समृद्ध पाठ-संपादक पर एक नज़र डाल सकते हैं जो मानक HTML textarea से अधिक अनुकूलन की अनुमति देता है। दुर्भाग्यवश, हो सकता है कि आप हैकिश परिणाम के साथ बहुत समय बिताएं। हालांकि सौभाग्य!

— mkelley33

1

क्या यह वही है आप जिसकी तलाश में हैं? फ्लेक्सबॉक्स ...

.container{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.inside{
  height:100px;
  width:100px;
  background:gray;
  border:1px solid;
}

<section class="container">
  <section class="inside">
    A
  </section>
  <section class="inside">
    B
  </section>
  <section class="inside">
    C
  </section>
</section>

स्निपेट का विस्तार करें

— रोनी रोस्टन
स्रोत

-1

यह काम

<div style="display:inline-block;margin:10px auto;">
    <ul style="list-style-type:none;">
        <li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
        <li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
        <li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
        <li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
    </ul>
</div>

— user7212232
स्रोत

3

क्या आप अपना कोड और उसके फायदे और नुकसान बता सकते हैं? इस तरह से दूसरे इसे सिर्फ कॉपी और पेस्ट करने के बजाय उससे सीख सकते हैं जो वे पूरी तरह से समझ सकते हैं या नहीं कर सकते हैं।

— रॉबर्ट