CSSセンタリングの問題

Question

私は現在私のサイトに問題があります。私は現在、それを再設計しようとしています。

サイト：Link

これはstyle-power.css

/* main body style */ 
body { 
background: #c7ff9a; 
color: #000000; 
font-family: Tahoma, Verdana, sans-serif; 
font-size: 12px; 
margin: auto; 
text-align:center; 
} 

.container { 
width:1800px; 
} 

.bodycentre { 
text-align: center; 
width:1300px; 
vertical-align:middle; 
margin-left:40px; 
margin-right:40px; 
font-family: Tahoma, Verdana, sans-serif; 
} 

.header { 
text-align:center; 
vertical-align:middle; 
background:url(../images/powerplay.png) center top no-repeat; 
height:150px; 
width:1300px; 
margin: -10px 0 0 0; 
border-bottom:2px solid #ddd; 
border-left:2px solid #ddd; 
border-right:2px solid #ddd; 
box-shadow: 0 0 6px #000; 
-moz-box-shadow: 0 0 6px #000; 
-webkit-box-shadow: 0 0 6px #000; 
padding: 4px 10px 4px 15px; 
border-radius: 6px; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
} 

.menu { 
position:relative; 
float:left; 
z-index:5001; 
width:190px; 
height:215px; 
margin: 0 0 0 -305px; 
border: 2px solid #ddd; 
box-shadow: 0 0 6px #000; 
-moz-box-shadow: 0 0 6px #000; 
-webkit-box-shadow: 0 0 6px #000; 
padding: 4px 10px 4px 15px; 
border-radius: 6px; 
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
} 

.footer { 
text-align: center; 
vertical-align:baseline; 
position: relative; 
width:1300px; 
} 

問題はそれだけであなたが.menu divの上記のリンクに行くときがない私はCSSでいじってきたということですが、私のCSSです中心にない。また、それが問題の中心になったときに私は、あなたがJavaスクリプトのズームをズームインすると、メニューが画面の一部であり、それをスクロールできなかったということでした。

これは、インデックスページのためのコードです：

<link rel="stylesheet" type="text/css" media="screen" href="../styles/style-power.css" /> 
<div class="container"> 
<div class="header"></div> 
<br /> 
<br /> 
<div class="menu"> 
<ul id="nav"> 
    <p align="left"><strong>Power Play Pro Shop</strong></p> 
    <li><a href="/?module=power-play&n=index" title="Home">Home</a></li><br /> 
    <li><a href="#"><strong>Deals</strong></a><ul> 
    <li><a href="/?module=power-play&n=balls" title="Balls">Balls</a></li> 
    <li><a href="/?module=power-play&n=bags" title="Bags">Bags</a></li> 
    <li><a href="#">Shoes</a></li> 
    <li><a href="/?module=power-play&n=Combos" title="Combos">Combos</a></li> 
    </ul></li> 
<br> 
    <li><a href="/" title="Doubles Home">Doubles Home</a></li><br> 
<li><a href="/?module=admin&n=index" title="Admin">Admin Login</a></li></ul> 
</div> 
<div class="bodycentre"> 
    <h3>Power Play Pro Shop</h3> 
    <p>&nbsp;</p> 
    <h1>Deals</h1> 
    <p>Special Deals for the Bowlplex Doubles 2011</p> 
    <p><a href="/?module=power-play&n=balls" title="Balls">Balls</a></p> 
    <p><a href="/?module=power-play&n=bags" title="Bags">Bags</a></p> 
    <p>Shoes</p> 
    <p><a href="/?module=power-play&n=Combos" title="Combos">Combos</a></p> 
    <p>&nbsp;</p> 
    <h2>Staff</h2> 
    <p><img src="../images/players_8_1.jpg" alt="Steve Thornton" width="150" height="200" border="1" /></p> 
    <p><strong>Steve Thornton</strong></p> 
    <p>&nbsp;</p> 
    <p>&nbsp;</p> 
    <p>For Admin Access <a href="/?module=admin&n=login" title="Admin">Click Here</a></p> 
</div> 
<br /> 
<div class="footer"> 
<p>© 2011 David Passmore (David Passmore Web Development)<a href="http://www.powerplayproshop.com"></a></p> 
</div> 
</div> 

すべてのヘルプは、

おかげでみんなと女の子をいただければ幸いです！

Answer 1

あなたのCSSにそれを置く：

.container > *{margin:0 auto} 

は、いくつかの他の問題もあります。 meta,link、IEのコードはで、bodyではありません。

Answer 2

試して、

.menu { 
    position:relative; 

    z-index:5001; 
    width:190px; 
    height:215px; 
    margin:0 auto; 
    border: 2px solid #ddd; 
    box-shadow: 0 0 6px #000; 
    -moz-box-shadow: 0 0 6px #000; 
    -webkit-box-shadow: 0 0 6px #000; 
    padding: 4px 10px 4px 15px; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    -webkit-border-radius: 6px; 
} 

ちょうど私がなぜあなたはfloatを入れていないが、私はあなたのフィドルのリンクを働いfloat:left;とmargin:0 auto; を削除します。メニューはページの中央に表示されます。