Question

我需要将此菜单置于中心位置，以便在浏览器调整大小时，它不会与主体“断开”。我一直试图解决这个问题，它只是让我难过。我需要身体和菜单保持在一起，当浏览器的大小，并始终保持在一起。

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

Answer 1

你有'浮动：左;'关于你想要集中的项目。你需要它们不在左侧居中。删除并放置margin：auto;在他们。 http://jsfiddle.net/6q3QG/1/

<div style="margin: auto; width: 400px; height: 400px;">

让我的身体和菜单集中在一起

1 个答案: