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

我相信当将具有子元素的元素居中时，它将无法工作。我建议使用display：inline-block

替换navdiv的每个元素上的float：left

#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

我已将您的代码输入到空白项目中，并且您的导航栏似乎居中。这是a screenshot。

也许，问题出在其他地方。你能提供整个文件的链接吗？：）

Answer 3

保证金：0自动有时不适用于少数文档类型。您可以检查或更改doctype以排除此问题并尝试。

无法使用margin auto对我的导航栏居中

3 个答案: