CODEWITHSUNDEEP
htmlcsstwitter-bootstrapnavbar
Sang Yoo Kim
Sang Yoo Kim

Reputation: 365

Center content(logo) in Bootsrap Navbar

I'm trying to center my logo in boostrap navbar.

I've been searching numerous ways and I found some that worked for me but the center content would cover all of the navbar (unable to click on other links).

So I wrote my own code. Pull left and right are working with no problems, but my center wont center!

Here are my codes.

(I've set the background color to be red on my center content so I have an idea of it's size and area)

The HTML

  <nav class="navbar navbar-default" role="navigation">
    <div class="navbar navbar-fixed-top">

   <!--LEFT OF NAVBAR-->
          <div class="navbar-header pull-left">
            <a class="navbar-brand" href="#">
              <span class="glyphicon glyphicon-align-left"></span>
            </a>
          </div>


    <!--CENTER OF NAVBAR-->
          <div class="navbar-header center">
            <a class="navbar-brand" style="background:red;" href="#">Center</a>
          </div>


      <!--RIGHT OF NAVBAR-->
          <div class="navbar-header pull-right">
            <a class="navbar-brand" href="#" style="font-size:1em;">Sign In</a>
          </div>

        </div>
      </nav>

The CSS

.center {
  display:inline-block;
  float:none;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

Here is my jsfiddle. http://jsfiddle.net/ew64yt63/

Upvotes: 1

Views: 110

Answers (1)

SW4
SW4

Reputation: 71140

You could add text-align:center to .navbar

Demo Fiddle

.navbar {
    text-align:center;
}

Note that you may then need to change the text alignment for child elements.

Alternatively, you can offset and transform the element, e.g:

Demo Fiddle

.center {
    display:inline-block;
    position:relative;
    left:50%;
    transform:translateX(-100%);
}

Upvotes: 4

Related Questions