html - Centre a overflowing element about its container -

मेरे पास है:

  & lt; div & gt; & LT; आइफ्रेम & gt; & lt; / iframe & gt; & Lt; / div & gt; Div {width: 100%; ऊंचाई: 400 पिक्सेल; छिपा हुआ सैलाब; } आइफ्रेम {चौड़ाई: 9 40 पीएक्स; ऊंचाई: 400 पिक्सेल; मार्जिन: 0 ऑटो; प्रदर्शन क्षेत्र; }  

iframe को एक 'लापता अनुभाग' के लिए दाईं तरफ विभाजित किया जाता है मुझे आइफ्रेम केंद्र की जरूरत है कि यह 'लापता खंड' दोनों ही तरफ है। मार्जिन: 0 ऑटो इसे कटौती नहीं लगता है।

(संदर्भ में इसे डाल करने के लिए एक आइफ्रेम वीडियो है)

ऋणात्मक मार्जिन (आइफ्रेम के आधा के रूप में चौड़ाई ) का उपयोग करने के बारे में क्या है:

  iframe {width: 940px; ऊंचाई: 400 पिक्सेल; मार्जिन-बाएं: -470px / * & lt; -940px / 2 * /}  

या स्थिति: सापेक्ष; का उपयोग करके बाएं: -470px ; ।

मार्जिन: 0 ऑटो उस बच्चे के लिए काम नहीं करेगा जो उसके माता-पिता से अधिक व्यापक है। यहां तक ​​कि अगर आप डिस्प्ले संपत्ति को ब्लॉक में बदलते हैं।

से (10.3.3 ब्लॉक-स्तर , सामान्य प्रवाह में गैर-बदले गए तत्व) :

यदि चौड़ाई नहीं है स्वतः और सीमा-बाएं -विधि + पैडिंग-बायां + चौड़ाई + पेडिंग-दायें + सीमा-दायें-चौड़ाई ( मार्जिन-बाएं या मार्जिन-दाएं जो auto नहीं हैं ) <ब्लॉक> / Strong>, फिर स्वतः मान या मान के लिए मान या मार्जिन-दाएं निम्न नियमों के लिए, शून्य के रूप में माना जाता है ।

यदि CSS3 एक विकल्प है, तो आप iframe के लिए एक नकारात्मक स्थिति संपत्ति सेट कर सकते हैं > तत्व केंद्र को रखने के लिए जब अभिभावक का आकार बदलता है:

  iframe {width: 940px; ऊंचाई: 300px; पृष्ठभूमि रंग: नारंगी; स्थिति: रिश्तेदार; बाएं: 50%; रूपांतरण: ट्रांसलेट एक्स (-50%); }  

पुराने ब्राउज़रों के लिए जो CSS3 का समर्थन नहीं करते हैं, आपको आवरण के रूप में एक अतिरिक्त तत्व जोड़ना होगा।

इस दृष्टिकोण में, बच्चे ( iframe आपके मामले में) .wrapper नामक अन्य तत्व द्वारा लिपटे गए हैं :

  & lt; div class = "parent" & gt; & Lt; div वर्ग = "आवरण" & gt; & Lt; div वर्ग = "बाल" & gt; & lt; / div & gt; & Lt; / div & gt; & Lt; / div & gt;  

 । Parent {width: 100%; ऊंचाई: 400 पिक्सेल; छिपा हुआ सैलाब; स्थिति: रिश्तेदार; }। वाइपर {स्थिति: पूर्ण; बाएं: 50%; } .child {width: 940px; ऊंचाई: 300px; स्थिति: रिश्तेदार; बाएं: -50%; }  

।