title: Bootstrap Navbar Center Text
body: <p>I have recently implemented a collapse bootstrap navbar to my website. However I have an issue with it when it is in its full form. The text is aligned to the left of the navbar and despite much CSS config, and browsing of stackoverflow none of the changes I have tried have been successful at all.
  I am trying to change the navbar so that the text/links within it are centralized. 
          </p>
  
  <pre><code>        &lt;div class="navbar-header"&gt;
              &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
  
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
  
          &lt;/div&gt;&lt;!-- end navbar-header --&gt;
  
          &lt;div class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;
                      &lt;li&gt;&lt;a href="#home"&gt;Days Out&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#home"&gt;Ghosts&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#home"&gt;Beasts&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#home"&gt;History&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#home"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#home"&gt;Gifts&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#home"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#home"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!-- end collapse --&gt;
          &lt;/div&gt;
  </code></pre>