2013-12-10 14 views
-2

我需要居中這個菜單,所以當瀏覽器正在調整大小它不與身體「uncenter」。我一直在試圖弄清楚這一點,它只是難倒了我。我需要身體和菜單保持在一起,當瀏覽器被調整大小時,並始終保持中心位置。保持我的身體和菜單集中在一起

HTML的

<div id="logo"> 
    <a href="KJ's Ski Store Home.html"><img src="Ski Store Logo.png" alt="logo" height="85"   width="85"/></a> 
    </div> 
    <div id="nav"> 
    <ul> 
    <li><a href="KJ's Ski Store Home.html">Home</a></li> 
    <li> 
    <a href="KJ's Ski Store Home.html">Store</a> 
    <ul id="subnav"> 
    <li><a href="snowboards.html">Snowboards</a></li> 
    <li><a href="boots.html">Boots</a></li> 
    <li><a href="helmets.html">Helmets/Hats</a></li> 
    <li><a href="goggles.html">Goggles</a></li> 
    </ul> 
    </li> 
    <li><a href="location.html">Location</a></li> 
    <li><a href="location.html">Contact Us</a></li> 
    </ul> 
</div> 
div style="float: left; width: 400px; height: 400px; margin-left: 5%;"> 
<img alt="slide" src="slideshow1.jpg" name="slide" width="400" height="400"/> 
</div> 
<div style="float: left; width: 15%;"></div> 
<div id="battle" style="float: left; width: 40%;"> 
<h1>Snowboarding or Skiing</h1> 
<p> "<strong>Snowboarding has been better than skiing since it was invented</strong> and nothing has changed 
with that in the last, roughly, 30 years. Skiers and snowboarders get along these days, 
share the slopes and even ride together, but snowboarding is still a superior sport. It's 
mellow that you followed us into the world of freestyle riding and we're happy to share 
our terrain parks and half pipes with you. We even let you hit our jibs. We don't mind 
that skiers rode our coattails into the X Games and now even the Olympics (I'm talking 
freestyle skiing here.) We're totally down with you guys and gals even if you are 
two-plankers. Nevertheless, snowboarding will always be on top."</p> 
<h4>Brad Farmer, Fuel T.V.</h4> 
</div> 

CSS-

body { 
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif; 
padding: 20px 50px 150px; 
font-size: 13px; 
text-align: center; 
} 

ul { 
text-align: left; 
display: inline; 
margin: 0; 
padding: 15px 4px 17px 0; 
list-style: none; 
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); 
} 
ul li { 
font: bold 12px/18px sans-serif; 
display: inline-block; 
margin-right: -4px; 
position: relative; 
padding: 15px 20px; 
background: #fff; 
cursor: pointer; 
-webkit-transition: all 0.2s; 
-moz-transition: all 0.2s; 
-ms-transition: all 0.2s; 
-o-transition: all 0.2s; 
transition: all 0.2s; 
} 
ul li:hover { 
background: #555; 
color: #fff; 
} 
ul li ul { 
padding: 0; 
position: absolute; 
top: 48px; 
left: 0; 
width: 150px; 
-webkit-box-shadow: none; 
-moz-box-shadow: none; 
box-shadow: none; 
display: none; 
opacity: 0; 
visibility: hidden; 
-webkit-transiton: opacity 0.2s; 
-moz-transition: opacity 0.2s; 
-ms-transition: opacity 0.2s; 
-o-transition: opacity 0.2s; 
-transition: opacity 0.2s; 
} 
ul li ul li { 
background: #555; 
display: block; 
color: #fff; 
text-shadow: 0 -1px 0 #000; 
} 
ul li ul li:hover { background: #666; } 
ul li:hover ul { 
display: block; 
opacity: 1; 
visibility: visible; 
} 
#nav a:link{ 
color: #000000; 
} 
#nav a:visited{ 
color: #000000; 
} 
#nav a:hover{ 
color: #ffffff; 
} 
#nav a:active{ 
color: #000000 
} 
#nav a{ 
text-decoration: none; 
} 
#subnav a:link{ 
color: #ffffff; 
} 
#subnav a:visited{ 
color: #ffffff; 
} 
#subnav a:hover{ 
color: #ffffff; 
} 
#subnav a:active{ 
color: #ffffff; 
} 

ul{ 
display: inline-flex; 
} 


#logo{ 
text-align: center; 
} 

#battle h1{ 
text-align: center; 
} 
#battle p{ 
text-align: center; 
} 
+0

是否嘗試使用margin:0 auto;在身體的CSS? – Keith

+4

這與你最後一個問題有什麼不同:http://stackoverflow.com/questions/20499187/centering-my-body-to-the-menu-and-the-rest-of-the-page? – j08691

+0

保證金:0汽車沒有工作......我編輯了最後一個問題。我真的需要這樣做,而且我知道如果我只是再次發佈一個,它會幫助它儘早得到答案。 – KStahljr

回答

0

你有 '浮動:左;'在你試圖居中的項目上。你需要他們不在左邊居中。刪除並放入margin:auto;在他們。 http://jsfiddle.net/6q3QG/1/

<div style="margin: auto; width: 400px; height: 400px;"> 
相關問題