将我的身体以菜单和页面的其余部分为中心 [英] Centering my body to the menu and the rest of the page
问题描述
我需要将此菜单居中，以便在调整浏览器大小时它不会与主体不居中".我一直在试图解决这个问题，但它让我很难过.我只需要身体和菜单都保持在一起，一起移动，一起居中.
html-
<a href="KJ's Ski Store Home.html"><img src="Ski Store Logo.png" alt="logo" height="85" width="85"/></a><div id="导航"><ul><li><a href="KJ's Ski Store Home.html">首页</a></li><li><a href="KJ's Ski Store Home.html">Store</a><ul id="子导航"><li><a href="snowboards.html">滑雪板</a></li><li><a href="boots.html">靴子</a></li><li><a href="helmets.html">头盔/帽子</a></li><li><a href="goggles.html">护目镜</a></li><li><a href="location.html">位置</a></li><li><a href="location.html">联系我们</a></li>
div style="float: left; width: 400px; height: 400px; margin-left: 5%;"><img alt="slide" src="slideshow1.jpg" name="slide" width="400" height="400"/>
<div style="float: left; width: 15%;"></div><div id="battle" style="float: left; width: 40%;"><h1>单板滑雪或滑雪</h1><p><strong>单板滑雪自发明以来一直比滑雪好</strong>并且没有任何改变在过去的大约 30 年里.这些天滑雪者和单板滑雪者相处得很好，共享斜坡甚至一起骑行，但滑雪仍然是一项高级运动.它是您跟随我们进入自由式骑行的世界，我们很高兴与您分享我们的地形公园和半管道与您同在.我们甚至让你打我们的吊臂.我们不介意滑雪者骑着我们的燕尾服参加了极限运动会，现在甚至参加了奥运会(我说的是在这里自由式滑雪.)即使你两个木板.尽管如此，单板滑雪永远是最重要的."</p><h4>Brad Farmer，Fuel T.V.</h4>
CSS-
body {font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;填充:20px 50px 150px；字体大小:13px；文本对齐:居中；}ul{文本对齐:左；显示:内联；边距:0；填充:15px 4px 17px 0;列表样式:无；-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);}乌利{字体:粗体 12px/18px sans-serif；显示:内联块；边距右:-4px；位置:相对；填充:15px 20px；背景:#fff;光标:指针；-webkit-transition:全部为 0.2s；-moz-transition:全部为 0.2s；-ms-transition:全部为 0.2s；-o-transition:全部为 0.2s；过渡:全0.2s；}ul li:悬停{背景:#555；颜色:#fff;}ul li ul {填充:0；位置:绝对；顶部:48px；左:0；宽度:150px；-webkit-box-shadow:无；-moz-box-shadow:无；框阴影:无；显示:无；不透明度:0；可见性:隐藏；-webkit-transiton:不透明度 0.2s；-moz-transition: 不透明度 0.2s;-ms-transition: 不透明度 0.2s;-o-transition:不透明度0.2s；-过渡:不透明度0.2s；}ul li ul li {背景:#555；显示:块；颜色:#fff;文本阴影:0 -1px 0 #000；}ul li ul li:hover { 背景:#666;}ul li:悬停ul {显示:块；不透明度:1；可见性:可见；}#导航:链接{颜色:#000000；}#nav a:visited{颜色:#000000；}#导航a:悬停{颜色:#ffffff；}#nav a:active{颜色:#000000}#导航{文字装饰:无；}#subnav a:link{颜色:#ffffff；}#subnav a:visited{颜色:#ffffff；}#subnav a:悬停{颜色:#ffffff；}#subnav a:active{颜色:#ffffff；}ul{显示:inline-flex；}#标识{文本对齐:居中；}#战斗h1{文本对齐:居中；}#战斗p{文本对齐:居中；}#nav{display:block;边距:0 自动；}
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屋！
