0

以下是我的 CSS 代码：

<style type="text/css">

body {
    background-color:#FFF;
    font-weight:bold;
    font-size:12pt;
    font-family:Arial,sans-serif;
}

.container {
    width: 800px;
    margin: 0 auto;

}

#header {
    text-align: left;
    padding-top: 220px;
    font-size: 60pt;

}
#subheader {
    text-align:left;
    font-size: 15pt;
    color: #666;
    margin-top: -5px;
    margin-bottom: 15px;

}

#email {
    width: 165px;
    height: 25px;       
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px; 
    border-radius: 10px;
    text-align:center;
    border: 2px solid;
    color: #666;
    border-color: black;

}
input[type=submit] {
    height: 30px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px; 
    border-radius: 10px;
    background-color: #000;
    border-color: #fff;
    color: #fff;
}

#socialMedia {
    padding-top: 60px;
    text-align:center;
}
#video {
    padding-left: 600px;
    margin-top: -260px;

}
</style>

HTML div 的划分如下：

<div class="container">
<div id="header">
    <Content>
</div>
<div id="subheader">
    <Content>
</div>
<Form Input Field>

<div id="video">

<Embedded Video>
</div>

<div id="socialMedia">
    <Social Media Image Links>
</div>

</div>
</body>
</html>

我遇到的问题是，虽然页面尝试通过浏览器重新缩放来居中，但只有内容的左侧真正在调整。右侧基本上挂在页面的边缘，因此不居中。

有什么建议么？我用 Chrome 试过这个。

4

2 回答 2

1

尝试在容器上设置最大宽度：

.container {
    max-width: 800px;
    margin: 0 auto;
}

这是一个演示：http: //jsfiddle.net/Ltf5U/

于 2012-05-26T18:55:30.220 回答
1

这可能是问题所在：

#video {
    padding-left: 600px;
    margin-top: -260px;

}

我不确定视频容器的大小，但也许这就是它没有与其他所有内容正确居中的原因。

当你改用这个 CSS 时，会发生什么？ 

#video {
    text-align:right;
    margin-top: -260px;

}

也许我误解了问题所在。能否发个问题截图？

于 2012-05-26T20:33:40.253 回答