2012-09-12 25 views
5

इससे पहले कि कोई नीचे मुझे अभी तक एक और केंद्रित समस्या पूछने के लिए मतदान किया। निर्णय लेने से पहले कृपया मेरी स्थिति पढ़ें!अधिकतम-चौड़ाई और पूर्ण स्थिति के साथ एक तरल पदार्थ DIV केंद्रित

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

मैक्स-चौड़ाई द्रव सत्ता है कि मैं चाहता हूँ को प्राप्त होता है, लेकिन क्योंकि पूर्ण स्थिति में तत्वों चौड़ाई बल्कि अधिकतम-चौड़ाई की तुलना में मेरी खड़ी/क्षैतिज केंद्रित टूट जाता है की जरूरत है। फिलहाल मैं केंद्रित (या इसके विपरीत), लेकिन मैं नीड दोनों से अधिक तरल पदार्थ सत्ता बलिदान करने के लिए हो रही है।

मैं हर समय ध्यान में रखते हुए मेरी केंद्रित DIV के भीतर सामग्री रखना चाहते हैं, मेरे वर्तमान कोड ऐसा नहीं करता है, यह सामग्री के रूप में खिड़की किया जाता है खाल छोटे http://jsfiddle.net/cCQ2w/

किसी को भी प्रस्ताव कर सकते हैं एक समाधान जो मेरे लिए काम कर सकता है?

उत्तर

2

मैंने आपकी समस्या का समाधान करने की कोशिश की है। यह पृष्ठ देखें: http://jsfiddle.net/PGce2/। तो यह क्षैतिज और लंबवत केंद्रित है और यह "तरल पदार्थ" है और 890 पीएक्स की चौड़ाई से अधिक नहीं है।

+0

इस अलग दृष्टिकोण के लिए धन्यवाद लेकिन यह 890px से अधिक है, और अधिक अनुच्छेद पाठ जोड़ने और ब्राउज़र विंडो को बड़ा बनाने का प्रयास करें। कोई अन्य विचार? – egr103

+0

@ egr103, मैं बस "चौड़ाई: 100%;" को हटाने के लिए भूल गया .break सीएसएस से। मैंने इसे यहां सही कर दिया है: [http://jsfiddle.net/afNyC/](http://jsfiddle.net/afNyC/)। मैंने फ़ायरफ़ॉक्स, क्रोम और आईई 9 – khomyakoshka

+0

शानदार में इसका परीक्षण किया! धन्यवाद! असल में मेरे मूल कोड में सामग्री के मुख्य बिट के पीछे 100% चौड़ाई div था ताकि एक बीजी छवि ब्राउज़र विंडो की पूरी चौड़ाई भर सके। क्या आप इस प्रभाव को प्रभावित करने के लिए चारों ओर एक और रैपर जोड़ने का सुझाव देंगे? – egr103

2

आप अधिकतम-चौड़ाई 890px करने के लिए सेट के साथ 100% की चौड़ाई प्रदान कर सकते हैं।

मैं पता चला है [यहां] [1] दोनों क्षैतिज और खड़ी संरेखित केंद्र के साथ एक div का नमूना।

[1]: http://jsfiddle.net/r2qL5sgj/1/ 
+0

चौड़ाई का उपयोग: 100% गणना की चौड़ाई को संग्रहित करने के साथ संयोजन में काम किया और बाद में फ्लो गणना को बाईपास करने के लिए चौड़ाई को प्रारंभिक रूप से सेट किया। –