Question

我在内容div中创建了一个导航栏，

<div id = "content">
<div id = "top_nav">
<ul>
<li><a href="?page=top&action=page1">page1</a></li>
<li><a href="?page=top&action=page2">page2</a></li>
<li><a href="?page=top&action=page3">page3</a></li>
</ul> 
</div>
</div>

Div的：

#content 
{ 
width:1000px; 
margin: auto; 
height: auto; 
margin-bottom: 70px; 
}

#top_nav
{
margin: auto;
}

我想将导航栏置于div中心，但上面的代码不会居中，是否有人知道如何使用它？

Answer 1

如果您想使用margin auto，则需要指定宽度试试这个：

#top_nav
{
    margin:0 auto;
    width:200px; //insert the width
}

DEMO

Answer 2

如果您不想为#top_nav指定宽度，请使用display：table，以便div具有其内容的宽度

#top_nav
{
  display: table;
  margin: 0 auto;
}

Answer 3

我认为你应该为#top_nav explcitly分配宽度，例如

#top_nav {
  margin: 0 auto;
  width: 500px;
}

否则它会使div 100％宽度并且没有自动余量

无法将导航栏置于菜单中心

3 个答案: