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

これが問題になる可能性があります。

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

}

ビデオコンテナのサイズはわかりませんが、他のすべてのものと適切に中央に配置されていないのはこのためかもしれません。

代わりにこのCSSを使用すると、どうなりますか？ 

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

}

多分私は問題が何であるかを誤解しています。問題のスクリーンショットを送っていただけませんか？

于 2012-05-26T20:33:40.253 に答える
1

コンテナに最大幅を設定してみてください：

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

ここにデモがあります：http://jsfiddle.net/Ltf5U/

于 2012-05-26T18:55:30.220 に答える