Question

所以我一直在使用相同的格式来根据所有屏幕分辨率居中。在我尝试添加视频之前，这已经有好一段时间了。

是否特别因为它是视频？

这是我的代码。 HTML

<body>
<div id="page-wrap">
    <div id="header">
        <img src="http://i.imgur.com/UMz3wIf.png" />
    </div>
    <img src="http://i.imgur.com/8snNfFV.png" />
    <ul id="nav">
        <li><a href="http://www.voyage-us.com">Home</a></li>
        <li><a href="http://www.voyage-us.com/xenforo/upload/index.php">Forums</a></li>
        <li><a href="http://www.voyage-us.com/members">Members</a></li>
        <li><a href="http://www.google.com">Streams</a></li>
        <li><a href="http://www.google.com">Contact Us</a></li>
    </ul>
    <div class="clear"></div>
    <div id="mainbody">
        <img src="http://i.imgur.com/oMJE74H.png" /></div>

    <div id="banished">
        <iframe width="325" height="240" src="http://www.youtube.com/embed/Ls8FBFFjMxk" frameborder="0" allowfullscreen></iframe>
    </div>

    <div id="footer">
    <p>&copy;2014 Rythmn Designs<p></div>
</div>
</body>

CSS

body
{
margin: 0px;
padding: 0px;
background: url("http://puu.sh/6RlKi.png")
}

.clear
{
clear:both;
}

#page-wrap
{
width: 1019px;
margin: 0 auto;
}

#header
{
width:100%;
text-align: center;
display: block;
}

.readmore
{
position: absolute;
margin: 0 auto;
top: 352px;
right: 382px
}

#nav
{
height: 1px;
list-style: none;
padding-left: 14px;
text-align: center;
padding-bottom: 0px;
margin: -14px;
margin-top: -15px;
}

#nav li a
{
position:relative;
top: -12px;
display: block;
width: 100px;
float: left;
color: white;
font-size:  14.09px;
text-decoration: none;
font-family:"BankGothic Md BT"
}

#nav li a:hover, #nav li a:active
{
color: red;
}

#mainbody
{
vertical-align:top;
position:relative
}

.news2
{
margin: 0 auto;
position: absolute;
top: 125px;
right: 375px
}

#banished
{
margin: 0 auto;
position: absolute;
top: 685px;
right:488px;
}

.news1
{
margin: 0 auto;
position: absolute;
top: 400px;
right: 378px
}

.teamspeak
{
position: absolute;
top: 125px;
right: 30px

}

#ts3viewer_1037062
{
position:absolute;
top: 155px;
right: 30px;
width: 290px;
height:190px;
overflow:auto;
}

.twitter-timeline
{
right: 27px;
top: 407px;
position:absolute;
width: 310;
height:230;
}

.twitter
{
right: 35px;
top: 406px;
position:absolute;
width: 310;
height:230;
}

#footer
{
background: #181818;
color: white;
padding: 20px 0 20px 0;
text-transform: uppercase;
border-top: 15px solid #828080;
text-align: center;
font-family:"BankGothic Md BT";
font-size:  12px;
position: relative;
}

Answer 1

这有帮助吗？我在笔记本电脑上进行了测试，似乎已经到位了

//编辑确定我想我这次修好了吗？

#banished{
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    width: 50%;
}
#banished iframe {
    position: absolute;
    top: 370px;
    left: 633px;
    height: 15%;
    width: 35%;
}

我还将#banshed放在html

中的#mainbody标签内

Answer 2

我认为你在#banished中键入了正确而不是左键。如果您将顶部更改为690px并将其更改为650px，则会将视频放在正确的位置（可能不是像素完美，您可以调整它）

视频不像我的其余代码那样居中

2 个答案: