无法使用保证金自动将导航栏居中

Question

I am having trouble centring my nav bar using margin: auto in my responsive design. Seems so simple, but for some reason is not working.

Here is my CSS and HTML for the nav portion of my page. What I want to do is always have the nav bar centred, no matter whether a device is in landscape or portrait orientation. Right now it just stays stuck to the left. Any advice would be greatly appreciated.

#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

I believe when centering an element that has child elements floating it will not work. I recommend replacing the float:left on each element of the navdiv with 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;**
}

Answer 2

I have entered your code into blank project and your navbar seems centered. Here's a screenshot .

Maybe, the problem is elsewhere. Can you provide a link to whole file see? :)

Answer 3

Margin:0 auto sometimes does not work for few doctypes. You could check or change the doctype to rule out this issue and try.