Center Nav Bar Elements

Question

<div id="wrapper" class="hfeed">
<div id="access">
  <div id="menu">
    <ul>
      <li class="page_item page-item-2"><a title="About" href="/?page_id=2">About</a></li>

      <li class="page_item page-item-20"><a title="Support" href="/?page_id=20">Support</a></li>

      <li class="page_item page-item-22"><a title="Links" href="/?page_id=22">Links</a></li>

      <li class="page_item page-item-47"><a title="About" href="/?page_id=47">About</a></li>
    </ul>
  </div>
</div><!-- #access -->
</div>

My current CSS:

div#menu {
background:#000;
height:1.5em;
margin:1em 0;
}

div#menu ul,div#menu ul ul {
line-height:1;
list-style:none;
margin:0;
padding:0;
}

div#menu ul a {
display:block;
margin-right:1em;
padding:0.2em 0.5em;
text-decoration:none;
}

div#menu ul ul ul a {
font-style:italic;
}

div#menu ul li ul {
left:-999em;
position:absolute;
}

div#menu ul li:hover ul {
left:auto;
}

Is my menu however I'm not sure how to centre it in the middle of the page.

Answer 1

try to use this css attribute: text-align and vertical-align
http://www.w3schools.com/css/pr_pos_vertical-align.asp
http://www.w3schools.com/CSS/pr_text_text-align.asp
I dont sure is your html is entry page or not so I can not edit the css for you, try to do that by yourself if possible.

Answer 2

If you want to center it on the x grid you would use the simple technique of auto margins:

1. Set your body so that it aligns text to the center:
   body{text-align:center;}

2. Set your container with auto margin left and right and also so it aligns all text back to the left:
   #wrapper{margin:0 auto;text-align:left;}

On the vertical side it's a bit trickier follow this article:
http://phrogz.net/css/vertical-align/index.html

Answer 3

Like what hitautodestruct said there are two ways, but you need to describe what you want.

Do you want the whole navigation block center aligned?
If so you could do this in the css (change the width to what ever you neeed it to be):

div#menu {
    width:500px;
    margin: 0px auto;
}

Do you want the content within the naviagtion to be centered?
If so then add this to your css:

ul {
    text-align:center;
}

If these aren't what you are looking for then can you describe in more detail please! Cheers

Answer 4

If the width of every <li> depends only on its content, try with:

#menu ul { text-align: center; }

#menu li { display: inline-block; }

If <a>’s display: block; breaks <li>’s layout, then set:

#menu li > a { display: inherit; }