SO Bootstrap navbar centering

http://stackoverflow.com/questions/20361501/twitter-bootstrap-v-3-0-dynamically-centering-navigation

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div class="navbar-wrapper">
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            <div class="navbar-header navbar-left">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span>

                </button> <a class="navbar-brand" href="#">All Saints Church, Ripley.</a>

            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a>

                    </li>
                    <li><a href="#about">About</a>

                    </li>
                    <li><a href="#contact">Contact</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

JavaScript

var width = 0,
    $navbarLinks = $(".nav.navbar-nav");

$navbarLinks.children().each(function (idx) {
    width += $(this).outerWidth();
});

$navbarLinks.width(width);