एक पृष्ठभूमि छवि को एक div में केंद्रित करें जिसमें न्यूनतम चौड़ाई है, भले ही पृष्ठ div की तुलना में संक्षिप्त हो

एचटीएमएल

<div id="outer">
  <div id="inner">
    Lorem Ipsum...
  </div>
</div>

सीएसएस

#outer { background: url('mypic.jpg') no-repeat center top; }
#inner { width: 960px; margin: 10px auto; }

यह कोड मेरी पृष्ठभूमि छवि को अच्छी तरह से केंद्रित करता है, को छोड़कर जब मेरा ब्राउज़र # पिन की 960px चौड़ाई से कम हो जाता है। इस संकीर्ण ब्राउज़र मामले में, #inner और #outer उनकी 960px चौड़ाई को उम्मीद के अनुसार बनाए रखता है (एक क्षैतिज ब्राउज़र स्क्रॉल बार दे रहा है), लेकिन #outer पर पृष्ठभूमि छवि #outer div की बजाय ब्राउज़र विंडो पर केंद्रित होती है। ब्राउज़र विंडो की बजाय div में केंद्रित होने के लिए मैं पृष्ठभूमि छवि को कैसे बनाए रख सकता हूं?

1
उदाहरण, ध्यान दें कि स्क्रीन पर छवि कैसे चलती है, भले ही बाहरी div स्क्रीन के दायीं तरफ जाता है। jsfiddle.net/5Kn7s
जोड़ा लेखक mrtsherman, स्रोत
असल में यह वास्तव में अजीब है - jsfiddle.net/5Kn7s/1 लाल सीमा पर ध्यान दें। बाहरी div अपने बच्चे के कंटेनर के साथ नहीं बढ़ रहा है ??? यही कारण है कि छवि स्क्रीन पर केंद्रित रहता है।
जोड़ा लेखक mrtsherman, स्रोत

1 उत्तर

मैं वास्तव में यह क्यों नहीं कह रहा कि यह क्यों हो रहा है, इसका सही जवाब नहीं है, लेकिन यदि आप बाहरी रूप से चौड़ाई लागू करते हैं तो यह अब जिस तरीके से आप चाहते हैं उसे प्रदर्शित करेगा। ऐसा नहीं है कि मैंने सोचा कि मॉडल ने हालांकि काम किया था। बहुत परेशान :/

#outer { min-width: 960px; }

http://jsfiddle.net/5Kn7s/3/

ठीक है, यह भी काम करता है, लेकिन आईई 7 या आईई 6 द्वारा समर्थित नहीं है

#outer { display: table-cell; }

http://jsfiddle.net/5Kn7s/4/

यह बहुत अजीब व्यवहार है, लेकिन स्पष्ट रूप से यदि आपके पास चौड़ाई निर्दिष्ट किए बिना एक div है, और यहां तक ​​कि यदि बच्चा माता-पिता से बड़ा है, तो माता-पिता केवल स्क्रीन के रूप में चौड़े हो जाते हैं।

0
जोड़ा