অনুভূমিকভাবে একটি iframe কেন্দ্রে?

Question

নিম্নলিখিত উদাহরণ বিবেচনা করুন: ( লাইভ ডেমো )

এইচটিএমএল:

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

সিএসএস:

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

ফলাফল:

কেন iframeকেন্দ্রীয়ভাবে এর মতো সারিবদ্ধভাবে হয় না div? আমি কীভাবে এটি কেন্দ্রীয়ভাবে সারিবদ্ধ করতে পারি?

Comments

কেন এই আইফ্রেমের জন্য একটি ডিভ মোড়ক না?

— গিবার্নো

Answer 1

display:block;আপনার iframe সিএসএস যোগ করুন ।

Comments

ধন্যবাদ! আমার অনুমান করা উচিত ছিল যে inline frameএটি একটি ইনলাইন উপাদান :) :)

— মিশা মোরোস্কো

সুতরাং "i" এর অর্থ এটিই।

— আয়ুষ

সুতরাং, পর্যায়ক্রমে, আপনি ধারককে একটি text-align: centerনিয়ম দিতে পারেন, তাই না ?

— কোভিকো

হ্যাঁ পাঠ্য-সারিবদ্ধকরণ: পাত্রে কেন্দ্রটিও খুব কার্যকর হবে

— ক্রিসওয়েব

আমি দেখতে পেলাম আমারও যোগ করতে হয়েছিলmargin: auto;

— MarkyDD

Answer 2

আপনার ওয়েবপৃষ্ঠায় একটি iframe কেন্দ্রের সবচেয়ে ভাল উপায় এবং আরও সহজ:

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

যেখানে প্রস্থ এবং উচ্চতা আপনার এইচটিএমএল পৃষ্ঠায় আপনার iframe এর আকার হবে।

Comments

আমি ভাবলাম alignগুণটি অবমূল্যায়ন করা হয়েছে? সিপিএস ব্যবহার না করে ওপিকে এই পদ্ধতিটি কেন ব্যবহার করা উচিত - এর সুবিধা কী?

— andrewsi

style="text-align:center"অবহেলিত নয় এবং একই কাজ করবে

— অ্যান্টনি

যদিও এটি অবমূল্যায়ন করা হয়েছে, এটি কাজ করে, অন্য সব কিছু না করে।

— ব্যবহারকারী 819490

এটি এইচটিএমএল ফাইলে কাজ করে এবং এইভাবে আমার মতো নতুনদের ইমপ্লিমেন্ট করা সহজ। আমি কেবল এটি 2017 সালে করেছি যাতে এটি হ্রাস করা উচিত না। বখশিশের জন্য ধন্যবাদ!

— রেনেল চেসাক

Answer 3

এইচটিএমএল:

<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

আপনি যদি ইফ্রেমে কোনও ভিডিও রাখছেন এবং আপনার লেআউটটি তরল হতে চায় তবে আপনার এই ওয়েবপৃষ্ঠায় নজর দেওয়া উচিত: তরল প্রস্থের ভিডিও

ভিডিও উত্সের উপর নির্ভর করে এবং আপনি যদি পুরানো ভিডিওগুলি প্রতিক্রিয়াশীল করতে চান তবে আপনার কৌশলগুলি পরিবর্তন করতে হবে।

এটি যদি আপনার প্রথম ভিডিও হয় তবে এখানে একটি সহজ সমাধান রয়েছে:

<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

এটি ভিডিওটিকে আইফ্রেমে প্রতিক্রিয়াযুক্ত করার জন্য, ঠিকঠাক কাজ করে, আপনাকে ধন্যবাদ!

— রিকার্ডো

Answer 5

Iframe উপাদান সারিবদ্ধ করার জন্য সহজতম কোড:

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

Comments

কিভাবে উত্তর দিতে হবে দয়া করে এই প্রথম দেখুন এই প্রশ্নের উত্তর আগে দেওয়া হয়, অবশ্যই, আপনি এখানে নিজের উত্তর যুক্ত করতে পারেন। তবে উত্তর দেওয়ার আগে আপনাকে কিছু বিষয় বুঝতে হবে। প্রথমত, কোনও উত্তর যুক্ত করবেন না যা আগে একই কোড বা পরামর্শের সাথে যুক্ত হয়েছিল। দ্বিতীয়ত, ব্যবহারকারী যদি সমস্যা সম্পর্কে খুব সুনির্দিষ্টভাবে জিজ্ঞাসা করে থাকে এবং এটি সমাধান করার জন্য তার কী প্রয়োজন হয় তবে অতিরিক্ত জটিল উত্তর যুক্ত করবেন না। তৃতীয়ত, আপনি উত্তর বা প্রশ্নের সাথে সম্পর্কিত কোনও পরামর্শ দিতে চাইলে আপনি একটি মন্তব্য যুক্ত করতে পারেন।

— অঙ্কিত সুতার

Answer 6

আপনি যদি একটি ভিতরে ভিতরে iframe রাখতে পারেন <div>

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

এটি কাজ করে কারণ এটি এখন একটি ব্লক উপাদানের ভিতরে।

Answer 7

Http://www.w3schools.com/css/css_align.asp এর মতে , বাম এবং ডান মার্জিনগুলিকে স্বয়ংক্রিয়ভাবে সেট করা নির্দিষ্ট করে যে তাদের উপলব্ধ মার্জিনকে সমানভাবে বিভক্ত করতে হবে। ফলাফলটি একটি কেন্দ্রিক উপাদান:

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

Comments

কেবলমাত্র যদি পিতামণ্ডলের উপাদানটিতে স্টাইলের পাঠ্য-প্রান্তিককরণ সেট করে থাকে।

— পারভাস

Answer 8

আপনি চেষ্টা করতে পারেন

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

আমি আশা করি এটি আপনার জন্য দরকারী

লিংক

Answer 9

আমার ক্ষেত্রে সমাধান ছিল iframe বর্গ যোগ করা:

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

Answer 10

আমি এখানে আপনারা যারা স্ক্রিনের অনুভূমিকভাবে ইফ্রেম বা চিত্র তৈরি করতে ভুগছেন তাদের সকলের জন্য স্নিপেট রেখেছি। আপনার ভাল লাগলে আমাকে থাম্বসকে ভোট দিন 👍⯅

শৈলী> আইএমজি এবং আইফ্রেমে> এটি আপনার ট্যাগের নাম তাই পরিবর্তন করুন যে আপনি যদি অন্য কোনও কেন্দ্রে ট্যাগ চান

<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>