将我的身体集中在菜单和页面的其余部分

Posted 2023-03-05

【中文标题】将我的身体集中在菜单和页面的其余部分

【英文标题】：Centering my body to the menu and the rest of the page

【发布时间】：2013-12-28 05:57:42

【问题描述】：

我需要使这个菜单居中，这样当浏览器被调整大小时，它就不会与正文“不居中”。我一直试图弄清楚这一点，它让我很难过。我只需要身体和菜单都保持在一起，一起移动，一起居中。

html-

<div id="logo">
    <a href="KJ's Ski Store Home.html"><img src="Ski Store Logo.png"              /></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  src="slideshow1.jpg" name="slide"  />
</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;

【问题讨论】：

似乎以我为中心：jsfiddle.net/an98A

我不明白，当我把它放到 jsfiddle (jsfiddle.net/22L4Y/1) 时，菜单是水平居中的，你的意思是你想垂直居中吗？

好的，我也刚刚查看了我的代码，我意识到它以我想要的方式居中。我的问题是身体没有以它为中心。当我的身体向左移动时，它将居中....

【参考方案1】：

#navdisplay:block; margin:0 auto;

【讨论】：

这很棒！谢谢！它做了我需要它做的事！有没有办法让我的身体也跟着它？那么其中的所有内容也将始终居中？

但是body内容在一个容器比如一个div和做同样的事情。

【参考方案2】：

你可以试试这个。是你期待的结果吗？

ul  display: inline-flex; 

【讨论】：

是的，也有效。谢谢！有没有办法让我的身体也跟着它？那么其中的所有内容也将始终居中？

这没有得到广泛支持，并且在旧浏览器中无法使用。

@KStahljr 是的，您可以将固定的max-width 值设置为body 和margin:0 auto，它将始终保持居中