考慮下面的例子:(現場演示)
HTML:
<div>div</div>
<iframe></iframe>CSS:
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}結果:
為什么iframe不像div那樣居中對齊？我如何集中調整它？
添加顯示:塊；添加到iframe css中。
div, iframe {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: #777;
}
iframe {
display: block;
border-style:none;
}<div>div</div>
<iframe src="data:,iframe"></iframe>將iframe放在網頁中央的最佳且更簡單的方法是:
<p align="center"><iframe src="http://www.google.com/" width=500 height="500"></iframe></p>其中寬度和高度是html頁面中iframe的大小。
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 align="center"><iframe width="560" height="315" src="www.youtube.com" frameborder="1px"></iframe></div>如果你在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>對此我最簡單的解決方案。
iframe {
margin:auto;
display:block;
}您可以將iframe放在& ltdiv & gt
<div>
<iframe></iframe>
</div>它之所以有效，是因為它現在位于塊元素內部。
你可以試試
<h3 style="text-align:center;"><iframe src=""></iframe></h3>我希望它對你有用
環
如果你不能訪問iFrame類，那么把css添加到包裝器div中。
<div style="display: flex; justify-content: center;">
<iframe></iframe>
</div>在我的例子中，解決方案是在iframe類上添加:
display: block;
margin-right: auto;
margin-left: auto;根據http://www.w3schools.com/css/css_align.asp,的說法，將左邊距和右邊距設置為自動意味著它們應該平均分配可用的邊距。結果是一個居中的元素:
margin-left: auto;margin-right: auto;在這里，我把代碼片段放在了屏幕中央的水平位置，供那些正在為制作iframe或image而苦惱的人使用。 如果你喜歡，給我豎起大拇指投票。?.
風格>img & ampiframe >這是你的標簽名，所以如果你想在中間放任何其他標簽，就改變它
<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>& ltiframe src = & quothttps://www.facebook.com/plugins/page.php? href = https % 3A % 2F % 2fwww . Facebook . com % 2 frisha BH-Cars-Jodhpur-110479104559774 & amp；tabs =時間軸& amp寬度= 500 & amp身高= 1200 & ampsmall_header=false。adapt _ container _ width = true & amp；hide_cover=false。show _ facepile = true & ampappId & quotwidth = & quot500 & quotheight = & quot1200 & quotstyle = & quot邊框:無；溢出:隱藏；顯示:塊；邊距:0自動；"滾動= & quot是的& quot框架邊界= & quot. 6 & gt；allowfullscreen = & quottrue & quot允許= & quot自動播放；剪貼板-寫入；加密媒體；畫中畫；網絡共享& quot& gt& lt/iframe & gt；
使用它并在html頁面中心的iframe中嵌入facebook
我用過
iframe {
align-items: center;
margin: auto;
}將iframe div放在中間，并將iframe中的項目放在中間。