html - 无法使用 margin auto 将我的导航栏居中

Question

在我的响应式设计中，我无法使用 margin: auto 将我的导航栏居中。看起来很简单，但由于某种原因不起作用。

这是我页面导航部分的 CSS 和 HTML。我想要做的是始终让导航栏居中，无论设备是横向还是纵向。现在它只是停留在左边。任何建议将不胜感激。

#navwrapper{
width:100%; 
}

#navdiv{
width: 290px;
margin: 0 auto;
padding:0;
clear:both;
}

/*navigation boxes*/
#home{
height:32px;
width:55px;
background-color:#1d5a61;
padding: 18px 0 0 0;
margin: 0 5px;;
float:left;
}


#products{
height: 43px;
width: 75px;
background-color:#789949;
padding: 7px 0 0 0;
margin: 0 5px;
float: left;
}


#know{
height: 38px;
width: 60px;
background-color:#1d5a61;   
padding:12px 0 0 0;
margin: 0 5px;
float: left;
}


#contact{
height: 38px;
width: 55px;
background-color:#789949;
padding:12px 0 0 0;
margin: 0 5px;
float:left;
}

<div id="navwrapper">
<div id="navdiv">
<div id="home">
<h3><a href="index.html">Home</a></h3>
</div>
<div id="products">
<h3><a href="products.html">Products<br />
&amp;<br />
Services</a></h3>
 </div>
<div id="know">
<h3><a href="did_you_know.html">Did You Know?</a></h3>
</div>
<div id="contact">
<h3><a href="contact.html">Contact<br />
Us</a></h3>
</div>
</div>
</div>

Answer 1

我相信当一个有 float 子元素的元素居中时它不会起作用。我建议将 navdiv 的每个元素上的 float:left 替换为 display: inline-block

#navwrapper{
width:100%; 
}

#navdiv{
width: 290px;
margin: 0 auto;
padding:0;
clear:both;
}

/*navigation boxes*/
#home{
height:32px;
width:55px;
background-color:#1d5a61;
padding: 18px 0 0 0;
margin: 0 5px;;
**display: inline-block;**
}


#products{
height: 43px;
width: 75px;
background-color:#789949;
padding: 7px 0 0 0;
margin: 0 5px;
**display: inline-block;**
}


#know{
height: 38px;
width: 60px;
background-color:#1d5a61;   
padding:12px 0 0 0;
margin: 0 5px;
**display: inline-block;**
}


#contact{
height: 38px;
width: 55px;
background-color:#789949;
padding:12px 0 0 0;
margin: 0 5px;
**display: inline-block;**
}