title: Centering CSS top navigation menu - SharePoint subsites
body: <p>I've searched high and low for the answer to the question but nothing seems to be working so hoping someone here can help me out.</p>
  
  <p>I am trying to center my top navigation menu for my SharePoint site but not having any luck. I have tried specifying a width, margin:0 auto and text-align=center with various other suggestions under the NavMainBar class. No matter what I am trying, the sub sites (text) always align left. I am sure its something minor, but for the life of me I am missing something. </p>
  
  <p>A snippet of the CSS is attached. Was hoping someone could tell me where I am going wrong.</p>
  
  <p><em>Edit: Added a screen dump to make myself a little clearer with what I am having trouble with. I need to move the text within the subsites on the menu, i.e Forms, Infopath, Test 1 etc etc to the middle of the page. Basically, centering just the heading text in the topnav menu, not the items on the drop down</em></p>
  
  <p><a href="http://i.imgur.com/mYcgR9g.png" rel="nofollow">http://i.imgur.com/mYcgR9g.png</a></p>
  
  <p>Cheers</p>
  
  <pre><code>/* Top Menu */
  .NavMainBar {position:relative; width:100%; text-align:center; height:40px; padding-bottom:1px; border:0px solid #000;}
  .NavBarIn {float:left; padding-left:10px; height:40px; }
  .NavBarLeft {float:left; height:40px; width:9px; background-color:#EBEBEB; /*background-image:url('../../../Images/navBarLeft.png');*/ background-repeat:no-repeat;}
  .NavBarRight {float:left; height:40px; width:9px; background-color:#EBEBEB; /*background-image:url('../../../Images/navBarRight.png'); */ background-repeat:no-repeat;}
  .NavBarFill {float:left; width:98%; height:40px; background-color:#EBEBEB; /*background-image:url('../../../Images/navBarFill.png'); */ background-repeat:repeat-x;}
  </code></pre>
  
  <p>Edit: Added HTML - The references to the other classes are to the stock standard core4v.css</p>
  
  <pre><code>&lt;div id="zz16_TopNavigationMenuV4" class="s4-tn"&gt;
  &lt;div class="menu horizontal menu-horizontal"&gt;
      &lt;ul class="root static"&gt;
          &lt;li class="static"&gt;&lt;a class="static menu-item" href="/forms/SitePages/Home.aspx" accesskey="1"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;Forms&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="static dynamic-children"&gt;&lt;a class="static dynamic-children menu-item" href="/infopath/Pages/default.aspx"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;Infopath&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;ul class="dynamic"&gt;
              &lt;li class="dynamic dynamic-children"&gt;&lt;a class="dynamic dynamic-children menu-item" href="/infopath/_layouts/viewlsts.aspx?BaseType=0"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;Lists&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;ul class="dynamic"&gt;
                  &lt;li class="dynamic"&gt;&lt;a class="dynamic menu-item" href="/infopath/Lists/TimeInLieu/AllItems.aspx"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;TimeInLieuMaster&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="dynamic"&gt;&lt;a class="dynamic menu-item" href="/infopath/Lists/TimeInLieuDaysOff/AllItems.aspx"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;TimeInLieuDaysOff&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;&lt;li class="dynamic dynamic-children"&gt;&lt;a class="dynamic dynamic-children menu-item" href="/infopath/_layouts/viewlsts.aspx?BaseType=1"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;Libraries&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;ul class="dynamic"&gt;
                  &lt;li class="dynamic"&gt;&lt;a class="dynamic menu-item" href="/infopath/TravelRequest/Forms/AllItems.aspx"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;TravelRequest&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="dynamic"&gt;&lt;a class="dynamic menu-item" href="/infopath/ISAuthorisation/Forms/AllItems.aspx"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;ISAuthorisation&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;&lt;/li&gt;
          &lt;/ul&gt;&lt;/li&gt;&lt;li class="static"&gt;&lt;a class="static menu-item" href="/TEST1/Pages/default.aspx"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;Test 1&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="static"&gt;&lt;a class="static menu-item" href="/test2/Pages/default.aspx"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;Test 2&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="static"&gt;&lt;a class="static menu-item" href="/test3/Pages/default.aspx"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;Test 3&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class="static"&gt;&lt;a class="static menu-item" href="/test4/Pages/default.aspx"&gt;&lt;span class="additional-background"&gt;&lt;span class="menu-item-text"&gt;Test 4&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>