केंद्र एक निश्चित स्थिति div संरेखित कर रहा है

Question

मैं एक ऐसा div पाने की कोशिश कर रहा हूँ, जो position:fixedमेरे पेज पर केंद्र संरेखित हो।

मैं हमेशा इस "हैक" का उपयोग करके बिल्कुल तैनात divs के साथ करने में सक्षम रहा हूं

left: 50%; width: 400px; margin-left:-200px

... जहाँ मार्जिन-लेफ्ट के लिए मान div की चौड़ाई का आधा है।

यह निश्चित स्थिति विभाजनों के लिए काम नहीं करता है, इसके बजाय यह उन्हें 50% पर अपने बाएं-सबसे कोने के साथ रखता है और मार्जिन-बाईं घोषणा को अनदेखा करता है।

इसे कैसे ठीक किया जाए, इसके बारे में कोई भी विचार मैं निश्चित तैनात तत्वों को संरेखित कर सकता हूं?

और मैं एक बोनस एम एंड एम में फेंक दूंगा अगर आप मुझे ऊपर बताए गए तरीके की तुलना में बिल्कुल तैनात तत्वों को संरेखित करने का एक बेहतर तरीका बता सकते हैं।

Comments

मेरे लिये कार्य करता है। सभी में लेकिन IE6 (स्पष्ट रूप से)।

— बॉबिन

@ यदि आप एक उत्तर चुन सकते हैं तो यह अन्य उपयोगकर्ताओं को आपके मुद्दे के समाधान की पहचान करने में मदद करेगा।

— andreihondrari

Answer 1

कोएन का उत्तर तत्व को बिल्कुल केंद्र में नहीं रखता है।

CCS3 transformसंपत्ति का उपयोग करने का उचित तरीका है । हालाँकि यह कुछ पुराने ब्राउज़रों में समर्थित नहीं है । और हमें कोई निश्चित या सापेक्ष सेट करने की भी आवश्यकता नहीं है width।

.centered {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
}

काम कर रहे jsfiddle तुलना यहाँ ।

Comments

यह एकदम सही है। मैंने इसे एक कॉर्डोवा एप्लिकेशन के लिए इस्तेमाल किया और इसके प्रमुख अपडेट किए गए ब्राउज़रों में चलने की उम्मीद है :)

— saurabh

बहुत सरल लेकिन पूरी तरह से उपयोगी। धन्यवाद।

— गिल्बर्टो सेंचेज

वाह धन्यवाद! मैं दो असमान विभाजनों के बीच पाठ को केंद्र में लाने की कोशिश कर रहा हूं और यह केवल एक ही है जो मार्कअप को नष्ट किए बिना काम करता है!

— एंड्री काइपोव

असली जवाब +1

— sn3ll

@ एलेक्स left: 50%ने पेज के 50% हिस्से में डिव को स्थानांतरित किया। लेकिन आपको यह ध्यान रखना है कि यह इसे div के बाईं ओर से शुरू होता है, इसलिए div अभी तक केंद्रित नहीं है। translate(-50%, 0)जो मूल रूप translateX(-50%)से div की वर्तमान चौड़ाई पर विचार करता है और वास्तविक स्थान से बाईं ओर इसकी -50% चौड़ाई को स्थानांतरित करता है।

— emil.c

Answer 2

लोगों के लिए यह एक ही समस्या है, लेकिन एक उत्तरदायी डिजाइन के साथ, आप भी उपयोग कर सकते हैं:

width: 75%;
position: fixed;
left: 50%;
margin-left: -37.5%;

ऐसा करने से आपका divस्क्रीन हमेशा एक उत्तरदायी डिजाइन के साथ केंद्रित रहेगा ।

Comments

इससे मुझे RWD परियोजना के साथ मदद मिली :)

— tctc91

ये 37.5% कहां से मिलता है?

— औरोरा

@ सौर - यह स्थिति सेटिंग का -1/2 है (इसलिए -(75/2)इस मामले में)

— इनामाथी

ऐसा क्यों नहीं है कि स्वीकृत उत्तर एक रहस्य है, यह सिर्फ काम करता है (tm)

— CGK

क्रॉपिस का एक बेहतर उपाय है

— कैपो

Answer 3

आप इसके लिए फ्लेक्सबॉक्स का उपयोग कर सकते हैं।

.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  
  /* this is what centers your element in the fixed wrapper*/
  display: flex;
  flex-flow: column nowrap;
  justify-content: center; /* aligns on vertical for column */
  align-items: center; /* aligns on horizontal for column */
  
  /* just for styling to see the limits */
  border: 2px dashed red;
  box-sizing: border-box;
}

.element {
  width: 200px;
  height: 80px;

  /* Just for styling */
  background-color: lightyellow;
  border: 2px dashed purple;
}

<div class="wrapper"> <!-- Fixed element that spans the viewport -->
  <div class="element">Your element</div> <!-- your actual centered element -->
</div>

Comments

क्यों केंद्र और संरेखित करने के लिए परेशान = "केंद्र"? पाठ-संरेखित करें: केंद्र रास्ता है

— wlf

आपको अपने उदाहरण में पाठ संरेखित शैली को शामिल करना चाहिए।

— मैनाटैक्स

आपको बहुत - बहुत धन्यवाद! यह वास्तव में मेरी मदद की!

— जोआन .bdm

मैंने अपने उत्तर को बदल दिया है <center>जिसका उल्लेख हटाकर display: flexऔर कुछ संबंधित संपत्तियों जैसी आधुनिक तकनीक का उपयोग करके किया गया था ।

— andreihondrari

Answer 4

ऊपर की पोस्ट से, मुझे लगता है कि सबसे अच्छा तरीका है

1. के साथ एक निश्चित div है width: 100%
2. Div के अंदर, के साथ एक नया स्थिर div बनाने margin-left: autoऔर margin-right: auto, या तालिका यह मेकअप के लिए align="center"।
3. टाडाअह, आपने अपनी नियत div अब केंद्रित कर दी है

आशा है कि यह मदद करेगा।

Comments

+1 बहुत उपयोगी है यदि आपको निश्चित चौड़ाई के साथ एक डिव को केंद्र में रखने की आवश्यकता है। जैसे 990px।

— dcernahoschi

यह भी एकमात्र तरीका है जिसे मैं max-widthनिश्चित-स्थिति तत्वों के लिए अनुमति देने के लिए जानता हूं । आप एक निश्चित साइडबार चाहते हैं जो जिम्मेदारी से आपके max-width: 1200pxवेब पेज का 30% लेता है ? यह आपको वहां मिलेगा।

— माइकल

Answer 5

सामान्य divs का उपयोग करना चाहिए margin-left: autoऔर margin-right: auto, लेकिन यह निश्चित div के लिए काम नहीं करता है। इसके आस-पास का रास्ता एंड्रयू के उत्तर के समान है , लेकिन यह पदावनत <center>चीज़ का उपयोग नहीं करता है। मूल रूप से, बस तय डिव को एक आवरण दें।

#wrapper {
    width: 100%;
    position: fixed;
    background: gray;
}
#fixed_div {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 100px;
    height: 30px;
    text-align: center;
    background: lightgreen;
}

<div id="wrapper">
    <div id="fixed_div"></div>
</div

यह div के भीतर एक निश्चित div को केन्द्रित करेगा जबकि div ब्राउज़र के साथ प्रतिक्रिया करने की अनुमति देगा। अगर वहाँ पर्याप्त जगह है तो div को केंद्रित किया जाएगा, लेकिन अगर नहीं है तो ब्राउज़र के किनारे से टकराएगा; एक नियमित केंद्रित div कैसे प्रतिक्रिया करता है के समान।

Answer 6

यदि आप एक निश्चित स्थिति को संरेखित करना चाहते हैं, तो लंबवत और क्षैतिज रूप से दोनों का उपयोग करें

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);

Answer 7

<div class="container-div">
  <div class="center-div">

  </div>
</div>

.container-div {position:fixed; left: 0; bottom: 0; width: 100%; margin: 0;}
.center-div {width: 200px; margin: 0 auto;}

ऐसा ही करना चाहिए।

Answer 8

यदि आप जानते हैं कि चौड़ाई 400px है, तो यह मेरे लिए सबसे आसान तरीका होगा।

 left: calc(50% - 200px);

Answer 9

यह काम करता है यदि आप चाहते हैं कि तत्व किसी अन्य नेविगेशन बार की तरह पृष्ठ पर फैले।

चौड़ाई: कैल्क (चौड़ाई: 100% - चौड़ाई जो भी हो, उसे बंद करना)

उदाहरण के लिए यदि आपका साइड नेविगेशन बार 200px है:

चौड़ाई: कैल्क (100% - 200px);

Answer 10

चौड़ाई का उपयोग करना काफी आसान है: 70%; छोड़ दिया: 15%;

तत्व की चौड़ाई को खिड़की के 70% पर सेट करता है और दोनों तरफ 15% छोड़ता है

Answer 11

मैंने ट्विटर बूटस्ट्रैप (v3) के साथ निम्नलिखित का उपयोग किया

<footer id="colophon" style="position: fixed; bottom: 0px; width: 100%;">
    <div class="container">
        <p>Stuff - rows - cols etc</p>
    </div>
</footer>

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

Answer 12

फ्लेक्स बॉक्स का उपयोग कर एक समाधान; पूरी तरह उत्तरदायी:

parent_div {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: center;
}

child_div {
    /* whatever you want */
}

Answer 13

यदि आप आवरण विधि का उपयोग नहीं करना चाहते हैं। तो आप यह कर सकते हैं:

.fixed_center_div {
  position: fixed;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px; /* 50% of width */
  margin-top: -100px; /* 50% of height */
}