所以这就是吃掉了我的生命，我简直无法理解。请帮忙！ 我不能让菜单坐在中心，甚至出现在父div的960宽度。这是html和CSS
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"> <img src="images/logo.png"></div>
<div id="contact"> Tel: 011 234 5678<br>
E-mail: info@domain.co.za</div>
<div id="secure">We accept the following via PayFast<img src="images/secure.png"></div>
<div id="nav">
<ul class="navbars">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Information</a>
<ul>
<li><a href="#">Accreditations</a></li>
<li><a href="#">Electricity Savings</a></li>
<li><a href="#">Colour Temp</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">LED downlights</a></li>
<li><a href="#">LED strip lights</a></li>
<li><a href="#">LED floodlights</a></li>
<li><a href="#">Power Supplies</a></li>
</ul>
</li>
<li><a href="#">Online Shopping</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<br>
<div id="slider" class="nivoSlider">
<img src="images/slide1.png" alt="" />
<a href="#"><img src="images/slide2.png" alt="" title="#htmlcaption" /></a>
<img src="images/slide3.png" alt="" title="This is an example of a caption" />
<img src="images/slide4.png" alt="" />
<div id="bulbshow"><img src="images/bulbshow.jpg"></div>
<div id="secure2">We accept the following via PayFast<img src="images/secure.png"></div>
<div id="footer">© Copyright 2014. All Rights Reserved, Company CC. Website designed and developed by <a href="http://www.domain.co.za"><img class="gi" src="images/gifavicon.png"></a><br>Reproduction in any form without express permission is prohibited.</div>
</div>
</body>
</html>
html {
background-image: url(../images/tile.jpg);
background-repeat: repeat;
}
a:hover {
text-shadow: 1px 1px 1px #e5e61d;
}
a:active {
background: #27428a;
}
#container {
width:960px;
margin: 0 auto;
}
#header {
display: block;
width:100%;
}
#logo {
display: inline-block;
width:20%;
float: left;
}
#contact {
display: block;
width:80%
float: left;
text-align: right;
padding-bottom: 1%;
}
#secure {
display: inline-block;
width: 80%;
float: left;
text-align: right;
padding-bottom: 2%;
}
#nav {
display: inline-block;
width: 940px;
line-height: 100%;
text-align: center;
font-size: large;
margin-left: 0 ; /* Ensures there is no space between sides of the screen and the menu */
margin-right:0;
z-index: 99; /* Makes sure that your menu remains on top of other page elements */
position: relative;
}
ul.navbars {
width:960px;
}
.navbars {
height: 30px;
width:960px;
float: left;
margin: 0px;
border-right: 0px solid #54879d;
}
.navbars li {
height: auto;
width: 160px; /* Each menu item is 150px wide */
float: left; /* This lines up the menu items horizontally */
text-align: center; /* All text is placed in the center of the box */
list-style: none; /* Removes the default styling (bullets) for the list */
font: normal 15px "Trebuchet MS", Helvetica, sans-serif, "Lucida Sans Unicode";
background: -webkit-linear-gradient(#0063d3, #27428a); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#0063d3, #27428a); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0063d3, #27428a); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0063d3, #27428a); /* Standard syntax */
}
.navbars a {
padding: 18px 0; /* Adds a padding on the top and bottom so the text appears centered vertically */
border-left: 1px solid #54879d; /* Creates a border in a slightly lighter shade of blue than the background. Combined with the right border, this creates a nice effect. */
border-right: 1px solid #1f5065; /* Creates a border in a slightly darker shade of blue than the background. Combined with the left border, this creates a nice effect. */
text-decoration: none; /* Removes the default hyperlink styling. */
color: white; /* Text color is white */
display: block;
}
.navbars li:hover, a:hover {background:#8080B5;
}
.navbars li ul {
display: none; /* Hides the drop-down menu */
height: auto;
margin: 0; /* Aligns drop-down box underneath the menu item */
padding: 0; /* Aligns drop-down box underneath the menu item */
}
.navbars li:hover ul {
display: block; /* Displays the drop-down box when the menu item is hovered over */
}
.navbars li ul li {background-color: #54879d;}
.navbars li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbars li ul li a:hover {background-color: #00006B;}
#bulbshow {
}
#secure2 {
text-align: right;
}
#footer {
text-align: center;
color: #fff;
background: -webkit-linear-gradient(#0063d3, #27428a); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#0063d3, #27428a); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0063d3, #27428a); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0063d3, #27428a); /* Standard syntax */
font-size: small;
font-family: "Trebuchet MS", Helvetica, sans-serif, "Lucida Sans Unicode";
height: 100%;
}
.gi {
width:2em;
}
答案 0 :(得分：1)
有很多解决方案可以使div居中，其中两个是：
<强> HTML ：
<div id="Container">
<div id="Nav"></div>
</div>
<强> CSS ：
#Container {
width: 500px;
height: 40px;
background: #444444;
overflow: hidden;
}
#Nav {
width: 200px;
height: 20px;
background: #CCCCCC;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
HTML（相同）
<强> CSS ：
#Container {
width: 500px;
height: 40px;
background: #444444;
overflow: hidden;
}
#Nav {
width: 200px;
height: 20px;
background: #CCCCCC;
margin-left: 150px;
margin-top: 10px;
}
正如你所看到的，你不能使用auto上下边距垂直居中div，所以如果你想垂直居中你的div，你必须做一个减法，然后加上它的1/2例如，顶部margin。
另一种方法（并非如此推荐）是将内部div的显示属性设置为inline-block，并将容器的text-align属性设置为center。像这样：
#Container {
width: 500px;
height: 40px;
background: #444444;
overflow: hidden;
text-align: center;
}
#Nav {
display: inline-block;
width: 200px;
height: 20px;
background: #CCCCCC;
}
这有效地打破了margin-top设置，因此您无法垂直居中。在这种情况下，您可能希望将父级vertical-align属性设置为middle，但您还应将其显示属性设置为table，并将子级的显示属性设置为table-cell，因为这只适用于表和div表。
<强>更新：
您可能还必须检查div，ul和li元素的填充和边距值，因为大多数浏览器都会为它们提供默认值。如果你想摆脱不受欢迎的空间，请确保它们被设置为0px;