Question

以下是我的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。

Answer 1

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

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

以下是演示：http://jsfiddle.net/Ltf5U/

Answer 2

这可能是问题所在：

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

}

我不确定视频容器的大小，但也许这就是为什么它没有与其他所有内容正确对齐。

当您使用此CSS时，会发生什么？

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

}

也许我误解了问题所在。你能发一个问题的截图吗？

使用保证金对中内容：0自动

2 个答案: