Html 如何使iframe居中,但也使其内联显示?
我有一个youtube视频,我想把它放在一个div的中心Html 如何使iframe居中,但也使其内联显示?,html,css,iframe,Html,Css,Iframe,我有一个youtube视频,我想把它放在一个div的中心 display: block; 如这里所建议的css,它确实正确地将其居中。但是,我有两个图像要在iframe旁边内联显示,一个在左侧,一个在右侧。当然,问题是当我在iframe中设置display:block时,它会阻止图像被放置到图片的左侧和右侧 这是html <div class="content"> <a id="logo" href="http://www.example.com">
display: block;
如这里所建议的css,它确实正确地将其居中。但是,我有两个图像要在iframe旁边内联显示,一个在左侧,一个在右侧。当然,问题是当我在iframe中设置display:block时,它会阻止图像被放置到图片的左侧和右侧
这是html
<div class="content">
<a id="logo" href="http://www.example.com">
<img id="logo" src="img/logo.png" alt="logo">
</a>
<br>
<nav class="topNav">
<a href="index.html">
<img id="home" class="topNav" src="img/home.png"
alt="home">
</a>
<a href="photos.html">
<img id="photos" class="topNav" src="img/photos.png"
alt="gallery">
</a>
<a href="about.html">
<img id="about" class="topNav" src="img/about.png" alt="about">
</a>
</nav>
<br>
<
<img id="image1" src="img/image1.png" alt="img1">
<iframe id="video" src="http://www.youtube.com/embed/L-9y6jP-HO4">
</iframe>
<img id="image2" src="image2.png" alt="img2">
<br>
<a id="downloadmp3" href="mp3/poo-on-the-shoe-ringtone.mp3"
target="_blank" onmouseover="mOver()" onmouseout="mOut()">
Download the ringtone!
</a>
<br>
<a href="https://www.facebook.com"
target="_blank">
<img id="facebookPic" src="img/facebook.png"
alt="Like Us On Facebook">
</a>
如何使iframe居中,同时保持图像的内联行为?链接到示例: CSS: HTML:
将所有内容都包装在一个
中,并将其居中?很抱歉,这在我的项目中不适用,在你的小提琴中也不适用。我相信它在小提琴中不适用的原因是因为我的显示器太小,我把这个区域拉长了一点,看起来它至少在左侧起作用,我确信它在右侧也起作用。然而,由于某些原因,这在我的代码中仍然不起作用。我只发布了我认为与帖子相关的代码,但显然是其他原因导致它无法工作,所以我将编辑我的帖子。请复习一下,让我知道你的想法。谢谢是的,如果它在您的项目中不起作用,那么其他css属性会干扰它…我不知道不看它会发生什么。很抱歉,花了这么长时间,编辑器给我带来了很多麻烦。您将不得不为我把这个放到JSFIDE中。完成后,单击“保存”。然后您将看到一个名为“共享”的新按钮。单击该链接,复制第一个URL,并将其保留在注释中。
body {
background: #563C21;
text-align: center;
}
.content {
text-align: center;
background-color: #4D361E;
box-shadow: 0 0 150px black;
border-radius: 15%;
}
#logo {
margin: auto;
text-decoration: none;
}
.topNav {
width: 210px;
height: 50px;
margin: auto;
display: inline;
}
.topNav a {
text-decoration: none;
}
#video {
width: 540px;
height: 315px;
display: block;
margin: auto;
border: 0;
}
#video {
width: 540px;
height: 315px;
margin: auto;
border: 0;
display: inline;
}
#image1, #image2 {
height: 200px;
display: inline;
}
.content {
text-align: center;
display: block;
}
<div class="content">
<img id="image1" src="img/image1.png" alt="img1" />
<iframe id="video" src="http://www.youtube.com/embed/L-9y6jP-HO4">
</iframe>
<img id="image2" src="image2.png" alt="img2" />
</div>