एक निश्चित div के सीएसएस क्षैतिज केंद्र?

Question

#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

मुझे पता है कि यह सवाल वहाँ से लाख बार है, हालांकि मैं अपने मामले का हल नहीं खोज सकता। मुझे एक डिव मिला है, जिसे स्क्रीन पर फिक्स किया जाना चाहिए, भले ही पेज स्क्रॉल हो जाए लेकिन स्क्रीन के बीच में हमेशा CENTERED रहना चाहिए!

Div की 500pxचौड़ाई होनी चाहिए, 30pxशीर्ष (मार्जिन-टॉप) से दूर होना चाहिए, सभी ब्राउज़र आकारों के लिए पृष्ठ के मध्य में क्षैतिज रूप से केंद्रित होना चाहिए और शेष पृष्ठ को स्क्रॉल करते समय हिलना नहीं चाहिए।

क्या यह संभव है?

Comments

यह भी देखें stackoverflow.com/questions/17069435/...

— e2-E4

Answer 1

left: 50%;
margin-left: -400px; /* Half of the width */

Comments

जब आप ब्राउज़र विंडो का आकार बदलते हैं तो यह काम नहीं करता है।

@ बोधिर: क्या आपको यकीन है? यह आकार बदलने पर मुझे सही लगता है। मुझे लगता है कि यह -400div की चौड़ाई के कारण निर्धारित किया जा रहा है 800।

— मेरलिन मॉर्गन-ग्राहम

@PrestonBadeer - उस सवाल की तरह जिसके बारे में पूछ रहे हैं?

— क्वेंटिन

पूरी तरह से सहमत - यह एक समाधान नहीं है! इस तरीके से कभी हार्ड कोड न करें। -1

— नैट I

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

— निक राइस

Answer 2

यहाँ के उत्तर पुराने हैं। अब आप आसानी से सीएसएस 3 ट्रांसफ़ॉर्म का उपयोग बिना किसी मार्जिन को हार्डकोड के कर सकते हैं । यह सभी तत्वों पर काम करता है, जिसमें बिना चौड़ाई या गतिशील चौड़ाई वाले तत्व शामिल हैं।

क्षैतिज केंद्र:

left: 50%;
transform: translateX(-50%);

कार्यक्षेत्र केंद्र:

top: 50%;
transform: translateY(-50%);

दोनों क्षैतिज और ऊर्ध्वाधर:

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

संगतता कोई समस्या नहीं है: http://caniuse.com/#feat=transforms2d

Comments

+1 यह उत्तर स्टैकओवरफ़्लो के साथ एक समस्या प्रदर्शित करता है: पुराने उत्तर जो उनके दिन के लिए अच्छे थे और ठीक से स्वीकार किए जाते थे वे शीर्ष पर गर्व के साथ बैठ सकते हैं, यह धारणा वे अभी भी उपयुक्त हैं, जबकि एक नई दुनिया के लिए महान उत्तर, जैसे यह है, बाधाओं के खिलाफ अपना रास्ता लड़ाई।

— निक राइस

@ नाइक्रिस 100% सहमत। यह उत्तर नया स्वीकृत उत्तर होना चाहिए। जूनियर देवों को भी वर्तमान स्वीकृत उत्तर नहीं देखना चाहिए !

— नैट I

@matt कृपया इसके बजाय इसे स्वीकार करें। इसे देखने के लिए दूर तक स्क्रॉल करें।

— ssbb

यह सामग्री तत्वों में बॉक्स छाया में एक धुंधला प्रभाव बनाता है।

— राब

हां, क्रोम गलत तरीके से रूपांतरित सामग्री को धुंधला करता है। पाठ भी धुंधला है। लेकिन यह केवल एक निश्चित तत्व है जो हार्डकॉर्पिंग के बिना केंद्रित है और आवरण तत्वों का उपयोग कर रहा है। यदि आप पृष्ठभूमि की पॉइंटर घटनाओं की परवाह नहीं करते हैं, तो आप एक पूर्ण स्क्रीन आवरण और फ्लेक्सबॉक्स या @ salomvary के समाधान के साथ समान प्रभाव प्राप्त कर सकते हैं।

— मैकीज क्रैस्कीज

Answer 3

यदि इनलाइन-ब्लॉक का उपयोग करना एक विकल्प है तो मैं इस दृष्टिकोण की सिफारिश करूंगा:

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
} 

मैंने इस पर एक छोटी सी पोस्ट यहाँ पर लिखी है: http://salomvary.github.com/position-fixed-horoubleically-kentered.html

Comments

10x, यह मेरे लिए बहुत अच्छा काम करता है w / o हार्ड-कोड के लिए किसी भी संख्या में widthया कुछ के लिए - @ जवाब के विपरीत

— Yatharth Agarwal

Answer 4

सितंबर 2016 को संपादित करें: हालांकि अभी भी इसके लिए एक सामयिक अप-वोट प्राप्त करना अच्छा है, क्योंकि दुनिया आगे बढ़ गई है, मैं अब उस उत्तर के साथ जाऊंगा जो परिवर्तन का उपयोग करता है (और जिसमें एक टन तक का उपयोग होता है)। मैं इसे इस तरह से नहीं करूंगा।

मार्जिन की गणना करने या उप-कंटेनर की आवश्यकता नहीं करने का दूसरा तरीका:

#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}

Comments

@ जॉय नीचे क्या करता है: 0 करते हैं? यानी इसकी जरूरत क्यों है? (यह कुछ समय है जब से मैंने इस पर ध्यान दिया है!)

— निक राइस

bottom:0यह सुनिश्चित करेगा कि मेनू हमेशा लंबवत केंद्रित हो, लेकिन मैं अब देख रहा हूं कि ओपी ने क्या नहीं पूछा। :)

— जॉर्डन H

मैं इसे एक अलग संदर्भ में उपयोग करने की कोशिश करता था, यह पता चलता है कि यह एफएफ में केंद्र नहीं है अगर तत्वों की ऊंचाई खिड़की (व्यूपोर्ट) की ऊँचाई से अधिक है

— फिलिप वर्मिंगहॉसन

क्योंकि दुनिया आगे बढ़ गई है, मैं अब उस उत्तर के साथ जाऊंगा जो परिवर्तन का उपयोग करता है। (मैंने पहले यह टिप्पणी की थी, उत्तर देने वाले के नाम का उल्लेख करते हुए - लेकिन उन्होंने उस नाम को बदल दिया जिससे मेरी टिप्पणी का कोई मतलब नहीं रह गया और मैंने इसे हटा दिया - बस इस पृष्ठ को बदलने के लिए खोज करें।)

— निक राइस

Answer 5

इस तरह से div को क्षैतिज रूप से केन्द्रित करना संभव है:

एचटीएमएल:

<div class="container">
    <div class="inner">content</div>
</div>

सीएसएस:

.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}

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

Answer 6

... या आप दूसरे में मेनू div लपेट सकते हैं:

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


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

Answer 7

यहां एक और दो-दिवसीय समाधान है। इसे संक्षिप्त रखने की कोशिश की गई और हार्डकोड नहीं किया गया। सबसे पहले, अपेक्षित HTML:

<div id="outer">
  <div id="inner">
    content
  </div>
</div>

निम्नलिखित सीएसएस के पीछे सिद्धांत "बाहरी" के कुछ पक्ष को स्थिति में लाना है, फिर इस तथ्य का उपयोग करें कि यह "आंतरिक" के आकार को अपेक्षाकृत बाद में स्थानांतरित करने के लिए मानता है।

#outer {
  position: fixed;
  left: 50%;          // % of window
}
#inner {
  position: relative;
  left: -50%;         // % of outer (which auto-matches inner width)
}

यह दृष्टिकोण क्वेंटिन के समान है, लेकिन आंतरिक परिवर्तनशील आकार का हो सकता है।

Answer 8

फुल स्क्रीन रैपर डिवा का उपयोग करते समय यहां एक फ्लेक्सबॉक्स समाधान है। औचित्य-सामग्री केंद्र यह बाल div है क्षैतिज और संरेखित-आइटम केंद्रों में यह लंबवत है।

<div class="full-screen-wrapper">
    <div class="center"> //... content</div>
</div>

.full-screen-wrapper { 
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  top: 0;
  align-items: center;
}

.center {
  // your styles
}