center unordered list navbar - bootstrap 3

Question

So, Im trying to center my nav-bar list items. Since there isn't a utility function for this task, I devised the following code that places the unordered list in a column within a row. But the list is still justified to the left even after I try centering with the old 'text-align:center'

<div class="navbar navbar-fixed-top ">
    <!--<a class="navbar-brand" href="#">Title</a> -->
    <div class= "row">
        <div style="border:1px solid black;text-align:center;" class="col-4 col-offset-4">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>
</div>

Solution 1

Steps I took:

• Remove float: left from list and list elements
• Use display: inline instead for list elements
• Set links to display: inline-block so they keep their block dimensions
• Simply add text-align: center to the navbar to center everything
• Wrap in media query so vertical list on mobile is unaffected

Resulting CSS adding a .navbar-centered style:

@media (min-width: 768px) {
    .navbar-centered .navbar-nav {
        float: none;
        text-align: center;
    }
    .navbar-centered .navbar-nav > li {
        float: none;
    }
    .navbar-centered .nav > li {
        display: inline;
    }
    .navbar-centered .nav > li > a {
        display: inline-block;
    }
}

Use by applying .navbar-centered style to navbar:

<div class="navbar navbar-default navbar-centered" role="navigation">
    ...
</div>

Solution 2

I was able to figure this out on my own. Not sure if it was the best solution:

        <div class="navbar navbar-fixed-top">                
                    <div style="border:1px solid black" class="container">
            <div class="inner-nav">
                <!--<a href="#" class="navbar-brand">Title</a> -->
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/" >Home</a></li>
                    <li><a href="#" >About</a></li>
                    <li><a href="#" >Projects</a></li>
                    <li><a href="#" >contact</a></li>
                </ul>
            </div>
                    </div>                
            </div>   

I then added the following styles to bootstrap.css:

/* ADDED for centering navbar items */
.navbar .inner-nav ul {
position:relative;left:50%;float:left;margin-right:0;margin-left:0;
}

/* ADDED for centering navbar items */
.navbar .inner-nav li {
position:relative;right:50%;float:left;margin:0;list-style:none
}

Solution 3

Here is the code I did yesterday, works fine with Bootstrap 3 RC1. Hope this will help you.

                <nav class="navbar navbar-fixed-top">                
                        <div class="container">                          
                            <a href="#" class="navbar-brand">Title</a>
                            <ul class="nav navbar-nav">
                                <li class="active"><a href="#" >Home</a></li>
                                <li><a href="#" >Services</a></li>
                            </ul>                                                                          
                        </div>                
                </nav>             

Let me know if problem is still there.

Edit: Removed unnecessary markup

Comments

[prufrock]

This is cleaner, but the same problem still exists. The list items are left-justified inside the container. I would like them centered

[oldopeniduser]

Firefox seems to add a horizontal scrollbar with this solution (due to the right: 50% rule).

[Jake]

Breaks when crossing from small into medium. Otherwise it worked wonderfully.

[Jake]

It probably has something to do with my also using an image inside the navbar. when I find the fix i'll put it up. thanks for verifying @deizel