将我的身体居中到菜单和页面的其余部分 [英] Centering my body to the menu and the rest of the page

问题描述

我需要将这个菜单居中，所以当浏览器被调整大小时，它不会与bodyuncenter。我一直在努力想出这一点，它只是令我失望。

I need to center this menu so when the browser is being sized it doesn't "uncenter" with the body. I've been trying to figure this out and it has just stumped me. I just need the body and the menu to all stay together, move together, and center together.

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;
}

推荐答案

#nav {display：block; margin：0 auto;}

这篇关于将我的身体居中到菜单和页面的其余部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！