क्षैतिज रूप से एक आइफ्रेम कैसे केंद्रित करें?

Question

निम्नलिखित उदाहरण पर विचार करें: ( लाइव डेमो )

HTML:

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

सीएसएस:

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

परिणाम:

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

Comments

क्यों इस iframe के लिए एक div लपेटो नहीं?

— गिबर्नो

Answer 1

display:block;अपने iframe css में जोड़ें ।

Comments

धन्यवाद! मुझे यह अनुमान लगाना चाहिए था कि एक inline frameइनलाइन तत्व है :)

— मिशा मोरोस्को

तो यह है कि "मैं" के लिए खड़ा है।

— आयुष

तो, वैकल्पिक रूप से, आप कंटेनर को एक text-align: centerनियम दे सकते हैं , सही?

— KOVIKO

हाँ टेक्स्ट-संरेखित करना: कंटेनर में केंद्र भी काम करेगा

— chrisweb

मैंने पाया मैं भी जोड़ने के लिए किया थाmargin: auto;

— MarkyDD

Answer 2

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

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

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

Comments

मैंने सोचा कि alignविशेषता को पदावनत किया गया था? ओपी को सीएसएस का उपयोग करने के बजाय इस दृष्टिकोण का उपयोग क्यों करना चाहिए - क्या लाभ है?

— andrewsi

style="text-align:center"पदावनत नहीं किया जाता है और एक ही काम करेगा

— एंथनी

भले ही यह मूल्यह्रास हो, यह काम करता है, जबकि बाकी सब कुछ नहीं करता है।

— user819490

यह HTML फ़ाइल में काम करता है और इस तरह मेरे जैसे नए लोगों के लिए आसान है। मैंने इसे 2017 में किया था इसलिए इसे अवमूल्यन नहीं करना चाहिए। पारितोषिक के लिए धन्यवाद!

— रेनेल चेसक

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

यदि आप iframe में एक वीडियो डाल रहे हैं और आप चाहते हैं कि आपका लेआउट तरल हो, तो आपको इस वेबपृष्ठ को देखना चाहिए: Fluid Widget 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 {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

डिस्क्लेमर: इसमें से कोई भी मेरा कोड नहीं है, लेकिन मैंने इसका परीक्षण किया है और परिणामों से खुश हूं।

Comments

यह iframe उत्तरदायी में वीडियो बनाने के लिए है, ठीक काम करता है, धन्यवाद!

— रिकार्डो

Answer 5

आइफ्रेम तत्व को संरेखित करने का सबसे सरल कोड:

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

Comments

कृपया इसे पहले देखें कि यह उत्तर कैसे दिया जाता है, इस प्रश्न का उत्तर पहले दिया गया है, जाहिर है, आप यहाँ अपना उत्तर जोड़ सकते हैं। लेकिन आपको उत्तर देने से पहले कुछ बिंदुओं को समझने की आवश्यकता है। सबसे पहले, एक उत्तर न जोड़ें जो पहले एक ही कोड या सुझाव के साथ जोड़ा गया हो। यदि उपयोगकर्ता ने समस्या के बारे में बहुत विशेष रूप से पूछा है और इसे हल करने की आवश्यकता है, तो दूसरा, अत्यधिक जटिल उत्तर न जोड़ें। तीसरा, आप एक टिप्पणी जोड़ सकते हैं यदि आप उत्तर या प्रश्न के बारे में कुछ भी सुझाना चाहते हैं।

— अंकित सुथार

Answer 6

आप iframe को a के अंदर रख सकते हैं <div>

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

यह काम करता है क्योंकि यह अब एक ब्लॉक तत्व के अंदर है।

Answer 7

Http://www.w3schools.com/css/css_align.asp के अनुसार , बाएं और दाएं मार्जिन को ऑटो पर सेट करना निर्दिष्ट करता है कि उन्हें उपलब्ध मार्जिन को समान रूप से विभाजित करना चाहिए। परिणाम एक केंद्रित तत्व है:

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

Comments

केवल अगर मूल तत्व में शैली पाठ-संरेखित सेट केंद्र है।

— parvus

Answer 8

तुम कोशिश कर सकते हो

<h3 style="text-align:center;"><iframe src=""></iframe></h3>

मुझे आशा है कि यह आपके लिए उपयोगी है

संपर्क

Answer 9

मेरे मामले में समाधान iframe वर्ग जोड़ने पर था:

    display: block;
    margin-right: auto;
    margin-left: auto;

Answer 10

यहाँ मैंने आप सभी के लिए स्निपेट रखा है जो क्षैतिज रूप से स्क्रीन के केंद्र में iframe या छवि बनाने के लिए पीड़ित हैं। अगर आपको पसंद आए तो मुझे THUMBS UP VOTE दें।

style> img & iframe> यह आपका टैग नाम है, ताकि यदि आप केंद्र में कोई अन्य टैग चाहते हैं तो बदल दें

<html >
 <head> 
            <style type=text/css>
            div{}
            img{
                 margin: 0 auto;
	         display:block;
         	}
	 iframe{	
		margin: 0 auto;
		display:block;
		}
				
            </style>
</head>
 <body >
           
			<iframe src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4" width="320" height="180" frameborder="0" allowfullscreen="allowfullscreen"></iframe> 
			
			<img src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg" width="320" height="180"  />
            </body> 
            </html>