एक बिल्कुल अलग स्थिति पर केंद्र संरेखित करें

Question

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

Div शीर्ष पर है, लेकिन मैं इसके साथ <center>या इसे केंद्र नहीं कर सकता margin: 0 auto;

Answer 1

यदि आप अपनी divनिश्चित चौड़ाई देते हैं, तो आपकी समस्या हल हो सकती है :

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

Comments

मुझे नहीं पता कि मैंने इसके बारे में क्यों नहीं सोचा, भले ही हम एक ही तकनीक का उपयोग हर समय ऊर्ध्वाधर केंद्रित करने के लिए करते हैं ... वैसे भी धन्यवाद, आपने मुझे बहुत समय बचाया।

— आयूष

क्या होगा यदि उपयोगकर्ता ने पृष्ठ के शीर्ष पर लंबवत स्क्रॉल किया है, जबकि यह दृश्य क्षेत्र पर दिखाई देनी चाहिए

— PUG

मैं अपने ओवरले डिव में गतिशील रूप से रिजेज़्ड चित्रों के थंबनेल प्रदर्शित कर रहा हूं, इसलिए मुझे चौड़ाई का पता नहीं है।

— पग

यह केवल एक समाधान है, stackoverflow.com/questions/1776915/… इसका समाधान प्रतीत होता है

— PUG

यह सही उत्तर नहीं है। विभिन्न मीडिया प्रकार इस स्निपेट का समर्थन नहीं करेंगे।

— सुशांत

Answer 2

div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

Comments

यह कैसे काम करता है? क्या आप यह बता सकते हैं कि आपका उत्तर मान्य क्यों है?

— १०:१२

मुझे वास्तव में 99% से अधिक बार यह तरीका पसंद है, आपको पैडिंग, बॉर्डर आदि से जूझना नहीं है, मैंने कभी भी इसे विफल नहीं देखा है, अगली बार यह एक उदाहरण प्रदान करता है यदि यह आपके लिए विफल रहता है।

— डैन

इस समाधान के बारे में अच्छी बात यह है कि यह

— पर्केंट्स के

वाह। मैं इस काम की उम्मीद नहीं कर रहा था, लेकिन यह मेरे लिए एक आकर्षण की तरह काम करता था

— आवा उमर

मैं मानता हूं कि यह सही उत्तर होना चाहिए, एक -200px मार्जिन मेरे लिए हैक चिल्लाता है।

— मनि ५५५६

Answer 3

मुझे पता है कि मुझे पार्टी में देर हो गई है, लेकिन मुझे लगा कि मैं उन लोगों के लिए एक उत्तर दूंगा, जिन्हें क्षैतिज रूप से एक पूर्ण वस्तु की स्थिति की आवश्यकता होती है, जब आपको इसकी सही चौड़ाई का पता नहीं होता है।

इसे इस्तेमाल करे:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

उसी तकनीक को भी लागू किया जा सकता है, जब आपको ऊर्ध्वाधर संरेखण की आवश्यकता हो सकती है, बस इस तरह गुणों को समायोजित करके:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Comments

Whaaat। यह कमाल का है! क्या आप बता सकते हैं कि यह कैसे काम करता है? संपादित करें: कुछ शिकार किया और ऐसा लगता है कि बाईं ओर: 50% div के बाएं स्थान को केंद्र में ले जाता है, जो वास्तव में केंद्र नहीं है। लेकिन TranslX इसे सामग्री की चौड़ाई

— अजीज जावेद

पूर्ण स्थिति किसी आइटम के ऊपरी बाएँ से स्थिति होगी। अनुवाद का उपयोग करके इसे अपने आकार के सापेक्ष राशि में स्थानांतरित कर दिया जाएगा।

— माइकल जियोवानी पुमो

माइकल, बस आप जानना चाहते थे, आप पार्टी कली के लिए देर नहीं कर रहे थे ... और उन लोगों के लिए जो न जानते हैं: परिवर्तन: अनुवाद (-50%, -50%); 1 रेखा के साथ ऊर्ध्वाधर और क्षैतिज दोनों केंद्र करता है

— मार्वल मो

Answer 4

इसे लंबवत और क्षैतिज रूप से केन्द्रित करने के लिए:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Answer 5

यदि आपके लिए रिश्तेदार की चौड़ाई (प्रतिशत में) होना आवश्यक है, तो आप अपनी div को पूर्ण रूप से स्थित एक में लपेट सकते हैं:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

याद रखें कि किसी तत्व को पूरी तरह से स्थान देने के लिए, मूल तत्व को अपेक्षाकृत स्थित होना चाहिए।

Answer 6

मैं एक ही मुद्दा रहा था, और मेरी सीमा यह थी कि मैं एक पूर्वनिर्धारित चौड़ाई नहीं रख सकता। यदि आपके तत्व की कोई निश्चित चौड़ाई नहीं है, तो यह प्रयास करें

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

फिर इस तरह दिखने के लिए अपने html को संशोधित करें

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>

Answer 7

या आप रिश्तेदार इकाइयों का उपयोग कर सकते हैं, जैसे

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

Answer 8

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}

Answer 9

हाँ:

div#thing { text-align:center; }

Comments

यह एक div के भीतर सामग्री संरेखित करेगा। यह पृष्ठ के केंद्र में div संरेखित नहीं करेगा। यह किसी भी तरह से पूरी तरह से तैनात डिव को संरेखित नहीं करेगा जो कि इसके भीतर की सामग्री के अलावा किसी अन्य तरह से है जो दस्तावेज़ प्रवाह का हिस्सा है।

— कार्टरमैन