Centered Navbar

Requires an additional div enclosing the navbar unordered list. You must know the width of your navbar for this to work.

In style sheet, add the following

    /* For centered navbar only */
    #navbar #centeringdiv{
       width:32.5em; /*Must be equal to, or slightly greater than, actual navbar width */
       margin:0 auto;    
    }
    
    /* For centered navbar only. Put class="firstitem" in first li tag */
    .firstitem{
       border-left:solid 1px #ccc;
    }

As indicated in comment above, the width of the centering div must be the actual width of your navbar (or slightly larger).

In the page, place entire navbar ul inside the centering div. Put class="firstitem" in first <li> tag so it has a left border line

  <div id="navbar">
    <!-- centeringdiv for centered navbar only -->
    <div id="centeringdiv">
      <ul>
        <!-- Put a left border on the first menu item -->
        <li class="firstitem"><a href="navhome.html">Home</a></li>
        <!-- All href="#" attributes must be replaced by links to actual pages -->
        <li><a href="#">NavItem2</a></li>
        <li><a href="#">NavItem3</a></li>
        <li><a href="#">NavItem4</a></li> 
      </ul>
    </div><!-- End centeringdiv -->
  </div><!-- End navbar -->

All code contained in this page. Click Home to return to opening page. All other links are just placeholders (they don't take you anywhere).