क्षैतिज रूप से iframe को कैसे केन्द्रित करें?

Question

निम्न उदाहरण पर विचार करें: (live demo)

HTML:

<div>div</div> 
<iframe></iframe> 

सीएसएस:

div, iframe { 
    width: 100px; 
    height: 50px; 
    margin: 0 auto; 
    background-color: #777; 
} 

परिणाम:

क्यों iframe को div की तरह केंद्रीय रूप से गठबंधन नहीं किया गया है? मैं इसे केंद्रीय रूप से संरेखित कैसे कर सकता हूं?

Answer 1

अपने आईफ्रेम सीएसएस में display:block; जोड़ें।

Answer 2

आप एक <div>

<div> 
    <iframe></iframe> 
</div> 

यह काम करता है, क्योंकि यह एक ब्लॉक तत्व के अंदर अब है अंदर आइफ्रेम डाल सकते हैं।

Answer 3

HTML:

<div id="all"> 
    <div class="sub">div</div> 
    <iframe>ss</iframe> 
</div> 

सीएसएस:

#all{ 
    width:100%; 
    float:left; 
    text-align:center; 
} 
div.sub, iframe { 
    width: 100px; 
    height: 50px; 
    margin: 0 auto; 
    background-color: #777; 

} 

Answer 4

, बाएँ और दाएँ हाशिए की स्थापना ऑटो को निर्दिष्ट करने के लिए है कि वे उपलब्ध मार्जिन समान रूप से विभाजित करना चाहिए के अनुसार।

margin-left: auto;margin-right: auto; 

Answer 5

आप iframe में एक वीडियो लगा रहे हैं और आप अपने लेआउट द्रव होना चाहते हैं, तो आप इस वेबपेज पर गौर करना चाहिए: Fluid Width Video

वीडियो स्रोत पर निर्भर करता है और परिणाम एक केंद्रित तत्व है यदि आप पुराने वीडियो को उत्तरदायी बनना चाहते हैं तो आपकी रणनीति को बदलने की आवश्यकता होगी।

<div class="videoWrapper"> 
 
    <!-- Copy & Pasted from YouTube --> 
 
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> 
 
</div>

और यह सीएसएस जोड़ें::

.videoWrapper { 
 
\t position: relative; 
 
\t padding-bottom: 56.25%; /* 16:9 */ 
 
\t padding-top: 25px; 
 
\t height: 0; 
 
} 
 
.videoWrapper iframe { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t width: 100%; 
 
\t height: 100%; 
 
}

यह आपका पहला वीडियो है, तो यहाँ एक सरल उपाय है अस्वीकरण: इनमें से कोई भी मेरा कोड नहीं है, लेकिन मैंने इसका परीक्षण किया है और परिणामों से खुश था।

Answer 6

सबसे अच्छा तरीका है और अपने वेब पेज पर एक iframe केंद्रित करने के लिए और अधिक सरल है:

<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p> 

जहां चौड़ाई और ऊंचाई अपने html पृष्ठ में अपने iframe के आकार होगा।

Answer 7

iframe तत्व संरेखित करने के लिए सबसे सरल कोड:

<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>