พิจารณาตัวอย่างต่อไปนี้: ( การสาธิตสด )
HTML:
<div>div</div>
<iframe></iframe>CSS:
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}ผลลัพธ์:
ทำไมการiframeจัดแนวกลางจึงไม่เหมือนdiv? ฉันจะจัดตำแหน่งจากส่วนกลางได้อย่างไร?
คำตอบ:
เพิ่มdisplay:block;ลงใน css iframe ของคุณ
inline frameเป็นองค์ประกอบแบบอินไลน์ :)
text-align: centerกฎให้ถูกต้องได้ไหม
margin: auto;
วิธีที่ดีที่สุดและง่ายกว่ามากในการกำหนด iframe ไว้ที่หน้าเว็บของคุณคือ:
<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>ความกว้างและความสูงจะเป็นขนาดของ iframe ของคุณในหน้า html ของคุณ
alignแอตทริบิวต์เลิกใช้แล้ว? เหตุใด OP จึงควรใช้วิธีนี้แทนที่จะใช้ CSS - ข้อดีคืออะไร
style="text-align:center"ไม่เลิกใช้และจะทำงานเหมือนเดิม
HTML:
<div id="all">
<div class="sub">div</div>
<iframe>ss</iframe>
</div>CSS:
#all{
width:100%;
float:left;
text-align:center;
}
div.sub, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}หากคุณกำลังใส่วิดีโอใน iframe และคุณต้องการให้เลย์เอาต์ของคุณลื่นไหลคุณควรดูที่หน้าเว็บนี้: วิดีโอความกว้างของของไหล
ขึ้นอยู่กับแหล่งวิดีโอและหากคุณต้องการให้วิดีโอเก่า ๆ ตอบสนองกลยุทธ์ของคุณจะต้องเปลี่ยน
หากนี่เป็นวิดีโอแรกของคุณนี่เป็นคำตอบง่ายๆ:
<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>และเพิ่ม CSS นี้:
.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%;
}คำเตือน: ไม่มีสิ่งนี้เป็นรหัสของฉัน แต่ฉันได้ทดสอบแล้วและมีความสุขกับผลลัพธ์
รหัสที่ง่ายที่สุดในการจัดตำแหน่งองค์ประกอบ iframe:
<div align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>คุณสามารถใส่ iframe ภายใน <div>
<div>
<iframe></iframe>
</div>มันใช้งานได้เพราะตอนนี้อยู่ในองค์ประกอบบล็อก
ตามhttp://www.w3schools.com/css/css_align.aspการตั้งค่าระยะขอบซ้ายและขวาเป็นอัตโนมัติระบุว่าพวกเขาควรแยกระยะขอบที่มีอยู่เท่า ๆ กัน ผลลัพธ์ที่ได้คือองค์ประกอบกึ่งกลาง:
margin-left: auto;margin-right: auto;คุณสามารถลอง
<h3 style="text-align:center;"><iframe src=""></iframe></h3>ฉันหวังว่ามันจะมีประโยชน์สำหรับคุณ
ในโซลูชันกรณีของฉันอยู่ในระดับ iframe เพิ่ม:
display: block;
margin-right: auto;
margin-left: auto;ที่นี่ฉันได้วางตัวอย่างสำหรับคุณทุกคนที่กำลังทุกข์ทรมานที่จะทำให้ iframe หรือภาพในใจกลางของหน้าจอในแนวนอน ให้คะแนนฉันหน่อยถ้าคุณชอบ👍⯅
สไตล์> 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>