11

How can I center the buttons in the jsFiddle I set up so that the buttons are equally spaced and centered within and through-out the navbar?

http://jsfiddle.net/3GQyq/3/

I have tried different methods such as

display:inline-block;margin:0 auto; text-align:center;

But I cannot get it to work.

If you could give a little explanation instead of just fixing the CSS as I want to learn so I do not have to keep coming back here.

EDIT:

http://img1.123freevectors.com/wp-content/uploads/icon_big/038_icon_beautiful-navigation-bar-free-vector.jpg Just like how they are centered here ^.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
ProEvilz
  • 5,310
  • 9
  • 44
  • 74

2 Answers2

14

Bootstrap 3 has a nav-justified class that can be used on nav. No extra CSS required:

<div class="container">
  <h3 class="text-muted">Project name</h3>
  <ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Downloads</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Demo: http://bootply.com/72519

Based on the comments, to have full-width centered links using the navbar-nav class, use flexbox...

.navbar-center {
    width:100%;
    display: flex;
}
.navbar-center>li {
    flex:1 1 auto;
}

<div class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav navbar-center text-center">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">Options</a></li>
        </ul>
    </div>
</div>

https://www.codeply.com/go/6ZE3obnpuP

Also see
Bootstrap NavBar with left, center or right aligned items
Center Navbar in Bootstrap

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
3

Add the style 

.nav{
    text-align: center;
}

This will center the text in li.

Check Fiddle

These styles should be sufficient. You were trying to apply styles to to the wrong element.

// This is being applied by the bootstrap
// Set it to 25px instead of the default 15px
.navbar{
    padding : 0 25px;
}

// Gave a width of 110px for each li
// as the container is following a fixed width format
li{
    width:110px;
}
Sushanth --
  • 55,259
  • 9
  • 66
  • 105
  • pleas re-check my questions I have edited it. You are missing my point, not the text but the buttons themselves. – ProEvilz Aug 07 '13 at 02:36
  • But I don't see those buttons in the fiddle – Sushanth -- Aug 07 '13 at 02:38
  • @sushhanth Please re-check my fiddle, I have updated things to make it a little more clearer. Prehaphs I was describing things incorrectly. I mean the links in the navbar. – ProEvilz Aug 07 '13 at 02:43
  • So you want them to be placed horizontally instead of the current vertical alignement – Sushanth -- Aug 07 '13 at 02:53
  • As you can see, all the buttons are aligned to the left, as if there is a `.float:left;` style applied to it. I want the buttons to be centered in the nav bar that will stretch out the full width of navbar. Look at the image I posted on the question. See how them nav buttons are centered the full width of the navbar, where as mine are all pulled over to the left? – ProEvilz Aug 07 '13 at 03:00
  • There is a `float:left` property applied to the li elements that is coming from the `bootstrap.css` file – Sushanth -- Aug 07 '13 at 03:12
  • setting the width explicitly helped – Matthew Lock Jan 10 '16 at 06:55