center text in bootstrap navbar

Question

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 text in the navbar. All of the other answers I've seen dealt with centering a nav ul . What I want to do is center a .nav-text in the navbar. I tried centering the text with text-align: center on pretty much every element in the navbar ( .navbar , .container , .navbar-collapse ) but none of them work.

HTML

<div id="navbar" style="opacity: 0;">
        <nav class="navbar navbar-default navbar-fixed-top" style="text-align: center;">
          <div class="container" style="text-align: center;">
            <div class="collapse navbar-collapse" style="text-align: center;">
              <ul class="nav navbar-nav">
                <li><a href="/">My Website</a></li>
                <li><a href="#">About</a></li>
              </ul>
              <p class='navbar-text text-center' style='text-align: center;'>My Website</p>
              <ul class="nav navbar-nav navbar-right">
                <p class="navbar-btn"><a href="checkout.php" class="btn btn-success">Continue to checkout <span class='fa fa-arrow-right'></span></a></p>
              </ul>
            </div>
          </div>
        </nav>
      </div>

How can this work?

Answer 1

I think the best way would be to use position:absolute . Create a special class for this and add the class to your navbar-text .

.navbar-center
{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
}

http://www.codeply.com/go/KLxn8UrXFW

Answer 2

Please consider the z-index in this case, otherwise you can't click the nav menu. Thanks

.nabvar-text {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  z-index: 10;
 }

.navbar-nav,
.navbar-right {
  position: relative;
  z-index: 99;
 }

Answer 3

Forcing float as "none" worked for me. Overrides default float??? Then just text-align: center.

  .navbar-text{
    float: none;
    text-align: center;
  }