title: center text in bootstrap navbar
body: <p>I've seen several answers of this sort on StackOverflow, but none of them suit my purposes. What I'm trying to do is center <strong>text</strong> in the navbar. All of the other answers I've seen dealt with centering a nav <code>ul</code>. What I want to do is center a <code>.nav-text</code> in the navbar. I tried centering the text with <code>text-align: center</code> on pretty much every element in the navbar (<code>.navbar</code>, <code>.container</code>, <code>.navbar-collapse</code>) but none of them work.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="navbar" style="opacity: 0;"&gt;
          &lt;nav class="navbar navbar-default navbar-fixed-top" style="text-align: center;"&gt;
            &lt;div class="container" style="text-align: center;"&gt;
              &lt;div class="collapse navbar-collapse" style="text-align: center;"&gt;
                &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="/"&gt;My Website&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
                &lt;p class='navbar-text text-center' style='text-align: center;'&gt;My Website&lt;/p&gt;
                &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;p class="navbar-btn"&gt;&lt;a href="checkout.php" class="btn btn-success"&gt;Continue to checkout &lt;span class='fa fa-arrow-right'&gt;&lt;/span&gt;&lt;/a&gt;&lt;/p&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>How can this work?</p>