Bootstrap menu center alignment?

Question

HTML

Good afternoon, there is a standard menu from bootstrap:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="navbar-collapse collapse">
                      <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Главная</a></li>
                        <li><a href="#about">Портфолио</a></li>
                        <li><a href="#contact">Обо мне</a></li>
                        <li><a href="#contact">Контакт</a></li>
                      </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>

How can I make it be centered on the screen?

Answer 1

style.css :
.navbar-nav {
float: none;
text-align: center;
}
.navbar-nav li {
float: none;
display: inline-block
}

Answer 2

Remove the navbar-fixed-top class and wrap the menu in<div class="container"></div>

Answer 3

Well I do not know. So maybe?

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="navbar-collapse collapse text-center">
                      <div style="
    display: inline-block;
"><ul class="nav navbar-nav">
                        <li class="active"><a href="#">Главная</a></li>
                        <li><a href="#about">Портфолио</a></li>
                        <li><a href="#contact">Обо мне</a></li>
                        <li><a href="#contact">Контакт</a></li>
  </ul></div>
                    </div><!--/.nav-collapse -->
                </div>
            </div>

With an indent between the menu and the block framing it, I think you'll figure it out.

Answer 4

You can also try that...

$(function(){
  var wBrowser = document.documentElement.clientWidth;
  var navbarWidth = $('.navbar-collapse').width(),
      navWidth = $('.nav').width(),
      navMargin = (navbarWidth/2)-(navWidth/2);
  $('.nav').css('margin-left', Math.round(navMargin));
  if(wBrowser < 768){
      $('.nav').css('margin-left', '-15px');
  }
});