डायनेमिक चौड़ाई के साथ केंद्र निश्चित div (सीएसएस)

Question

मेरे पास एक div है जिसमें यह CSS होगा:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

अब, मैं इस div को कैसे केंद्रित कर सकता हूँ? मैं उपयोग कर सकता हूंmargin-left: -450px; left: 50%; लेकिन यह तभी काम करेगा जब स्क्रीन> 900 पिक्सल हो। उसके बाद (जब विंडो <900 पिक्सल है), यह अब केंद्रित नहीं होगी।

मैं निश्चित रूप से कुछ प्रकार के जेएस के साथ ऐसा कर सकता हूं, लेकिन क्या सीएसएस के साथ ऐसा करने का "अधिक सही" है?

Comments

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

— जोशुआ एम

यहोशू ने जो कहा, वह दूसरे में एक बात को केन्द्रित करने के लिए है।

— जुबफेट

@ लिआम - इसके अलावा, आप margin: 0 autoएक position: fixeddiv पर एक का उपयोग नहीं कर सकते । क्या आपने प्रश्न भी पढ़ा है?

— यहोशू एम

^ नहीं। मैंने कोशिश की है कि के रूप में अच्छी तरह से। : p

— gubbfett

@JoshuaM आपका दावा 100% सही नहीं है। मेरा जवाब देखिए।

— लाकोनबास

Answer 1

आप एक fixedया केंद्र कर सकते हैंabsolute तैनात तत्व सेटिंग rightऔर leftकरने के लिए 0, और उसके बाद margin-leftऔर margin-rightकरने के लिए autoके रूप में यदि आप एक केंद्रित कर रहे थे staticतैनात तत्व।

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

इस उदाहरण को इस बेला पर काम करते हुए देखें ।

Comments

बस उल्लेख करने के लिए ... यह अप्रत्याशित नहीं है, लेकिन यह IE7 में विफल रहता है। यह यहां बाईं ओर से 0px स्थित है। यह कैसे IE में कभी सही काम करता है 8.

— gubbfett

यह काम नहीं करता है जब तत्व की चौड़ाई स्क्रीन की चौड़ाई से अधिक होती है .. तो उस स्थिति में काम करना अच्छा होगा।

— andrewb

@andrewb आप jsfiddle.net/PvfFy/168 पर देखे गए समान रूप से rightऔर leftकम से कम दोनों पर समान रूप से नकारात्मक मार्जिन लागू कर सकते हैं , लेकिन गैर-सुरुचिपूर्ण दृष्टिकोण IMHO है। मैंने इसे मज़े के लिए क्रोम पर परीक्षण किया है, मुझे नहीं पता कि क्या यह बाकी पर काम करेगाvalue >= witdth / 2

— लैकोनबैस

प्रश्न के दायरे के बाहर, यह तत्व की चौड़ाई निर्धारित करने पर निर्भर करता है, इसलिए यह बहुत अच्छा नहीं है यदि आपके पास गतिशील सामग्री है जिसकी चौड़ाई भिन्न या अज्ञात है। एक तरफ छोड़कर, मैं आम तौर पर प्रदर्शन के साथ ऐसा करूँगा: इनलाइन-ब्लॉक और कोई सेट चौड़ाई नहीं। क्या किसी के पास उस मामले के लिए नो-जेएस समाधान है?

— 14

प्रश्न डायनेमिक चौड़ाई कहता है , यह पूरी समस्या है, आप इसे अनदेखा नहीं कर सकते।

— गिल एप्सटेन

Answer 2

यदि आप सुरक्षित रूप से CSS3 की transformसंपत्ति का उपयोग कर सकते हैं, तो यहां एक और विधि दी गई है:

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... या यदि आप दोनों क्षैतिज और ऊर्ध्वाधर केंद्र चाहते हैं:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

Comments

जब तक यह एक आधुनिक ब्राउज़र के लिए है, यह इस उत्तर पर सबसे अच्छा समाधान है! केवल वही जो एक सच्चे `फ्लोट: सेंटर’ की तरह है, जिसमें आप रैपिंग एलिमेंट पर क्लिक कर सकते हैं और इसके चारों ओर फिश के तरीके नहीं होने चाहिए। इस उत्तर को प्यार करो!

— SpYk3HH

सावधान, केंद्र पाठ में प्रतिशत में अनुवाद का उपयोग न करें क्योंकि यदि परिणामी मान फ्लोट है तो इसे सुचारू किया जाएगा। हो बॉय, तुम ऐसा नहीं चाहते, नहीं।

— ग्नू

CSS ट्रांसफ़ॉर्म का उपयोग करके केवल पाठ से अधिक पर स्मूथिंग हो सकती है; मैं परिवर्तन के परिणामस्वरूप फंकी बॉर्डर प्राप्त कर रहा हूं।

— नाथन के

स्क्रीन आकार (विभाजन के आकार के आधार पर) को बदलते समय, जल्दी अनुबंध करने की क्षमता, जिसके परिणामस्वरूप विभाजन के किनारे पर बड़े बोर्डर होते हैं।

— सिंगल एंटिटी

Answer 3

<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

आपको इसे एक कंटेनर में लपेटना होगा। यहाँ एक सीएसएस है

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}

Comments

आह, मुझे तुम्हारी सोच पसंद है। निश्चित div वास्तविक परिणाम के साथ केवल एक और div के लिए एक कंटेनर होगा? मैं यह एक कोशिश करता हूँ!

— जुब्फेट

जबकि मुझे आपके उत्तर की गहनता पसंद है, मैं यह नहीं देखता कि यह ie6 / 7 के समर्थन की अनुमति कैसे देगा।

— मैथ्यू बर्ग

@ मैथबर्ग, यानी 6/7 के बारे में अच्छी बात। उस स्थिति में आपका उत्तर सबसे अच्छा होना चाहिए। यह थोड़ा ओटी है, लेकिन व्यक्तिगत रूप से मुझे लगता है कि डेवलपर्स को = = 7 के लिए सामान तय करने में समय नहीं लगाना चाहिए। मुझे लगता है कि वास्तव में डेवलपर्स को उन ब्राउज़र को ब्लॉक करना चाहिए ताकि पुराने सिस्टम वाले लोगों और कंपनियों को अपग्रेड करने के लिए मजबूर किया जा सके। उस विचार को किसी भुगतान करने वाले ग्राहक को बेचना कितना कठिन है! ;)

— जुबफेट

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

— मैथ्यू बर्ग

यह भी काम नहीं करता है क्योंकि आप "कंटेनर" के माध्यम से क्लिक नहीं कर सकते हैं

— SpYk3HH

Answer 4

यह अपनी सामग्री के आकार की परवाह किए बिना काम करता है

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

स्रोत: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Comments

खबरदार: transform: translate(-50%, -50%);पाठ को धुंधला करने का कारण बनता है (कम से कम क्रोम पर)

— Jiří