CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
yaakov
yaakov

Reputation: 4685

center text in bootstrap navbar

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?

Upvotes: 2

Views: 14801

Answers (3)

Ben Kao
Ben Kao

Reputation: 661

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

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

Upvotes: 0

Md. Parvez
Md. Parvez

Reputation: 104

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;
 }

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362760

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

Upvotes: 4

Related Questions