CODEWITHSUNDEEP
htmlcss
JM8-Real
JM8-Real

Reputation: 43

Can't center a navigation bar inside a menu

I have made a navigation bar inside the content 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>

Divs:

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

#top_nav
{
margin: auto;
}

I want to center the navigation bar inside the div, but the above code won't center it does anyone have an idea of how to get this working?

Upvotes: 0

Views: 43

Answers (3)

FabioG
FabioG

Reputation: 2986

If you don't want to specify a width for your #top_nav use display:table so that the div will have the width of it's content

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

Upvotes: 1

smnbbrv
smnbbrv

Reputation: 24581

I think you should assign the width for #top_nav explcitly, e.g.

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

otherwise it makes the div 100% width and there is no margin to be automated

Upvotes: 0

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35973

you need to specify the width if you would like to use margin auto try this:

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

DEMO

Upvotes: 2

Related Questions