无法将响应式导航菜单居中

Question

I'm unable to center my navigation menu despite using center-block or the the text-center class.

Here's an example of my problem: https://jsfiddle.net/whywymam/zpdpsuLn/17/

How do I fix this? Thank you in advance.

My HTML code:

<div class="Container">

      <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12">

          <navbar class="text-center">

              <div class="upperRow">

                   <div class="navbar-header">
                       <div class="col-xs-10 col-xs-pull-3 col-sm-6 col-md-6 col-lg-8">
                           <a href="home.php" class="brand navbar-brand logoFw"> <img src="image/logo.png" class="img-responsive"></a>
                       </div>
                   </div>

                   <div id="btnTopInline">

                            <ul class= "nav navbar-nav navbar-right imgicon hidden-xs">
                                <div class="col-sm-3 col-md-3 col-lg-3 btnRightSpace">    
                                       <li>
                                         <div class="indivColl">
                                                <a href="signupLogin.php">
                                                   <img src="image/jobseekerlogo.png" class="indi">
                                                   <p class="indit">Job Seeker</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                                <div class="col-sm-3 col-md-3 col-lg-2">
                                       <li>
                                         <div id="empColl">
                                                <a href="signupLoginEmp.php">
                                                   <img src="image/employerlogo.png" class="emp">
                                                   <p class="empt">Employer</p>
                                                </a>
                                         </div>
                                       </li>
                                </div>

                            </ul>

                   </div><!-- end btnTopInline -->

                    </div> <!-- end upperRow -->

                    <div class="bUpperRow">
                   <!--                for tablet and mobile view-->

                   <div class="col-xs-6 col-xs-push-3">
                        <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLoginEmp.php">
                                Employer<br>Log In
                            </a>
                        </button>
                   </div>

                    <div class="col-xs-6 col-xs-push-1">
                       <button type="button" class="btn btn-login visible-xs">
                            <a href="signupLogin.php">
                                Job Seeker<br>Log In
                            </a>
                        </button>
                    </div>
                    </div>


            <div class="middleRow">

                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                <div class="navbar-inner navbar-default navbar-static-top navcolor">

                          <div class="navbar-header ">

                              <!--button to appear when display is on mobile device-->
                              <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".nav-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="nav-collapse collapse-in" id="nav-collapse">

                              <ul class="nav navbar-nav center-block">
                                <li><a href="home.php">Home<img src="image/home.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="about.php">About<img src="image/about.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="pyw.php">Prove Your Worth<img src="image/PYW.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="#">Job<img src="image/jobs.png" width="75" height="65" alt="" title="" /></a></li>
                                <li><a href="rescources.php">Resources<img src="image/resource.png" width="75" height="65" alt="" title="" /></a></li>
                             </ul>

                          </div>


                    </div> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->
                </div>

            </div> <!-- end middle row -->

    <div class="navbar navbar-default navbar-fixed-bottom footer">
        <div class="container">
            <ul>
            <li><a href="about.php">About Us</a> | </li>
            <li><a href="contact.php">&nbsp; Contact Us</a> |</li> 
            <li><a href="terms&condition.php">&nbsp; Term of Use</a></li>
            </ul>
            <p class="copyright"> All Rights Reserved</p>
        </div>
    </div>

          </navbar>

      </div> <!-- end col-lg-12 col-md-12 col-sm-12 col-xs-12 -->

  </div><!-- end container -->

My CSS code:

.logoFw{
width: 100%;
}
.img-responsive {
max-width: 60%;
margin-bottom: 15%;
padding-top: -3%;
}
.imgicon {
padding-left: 50%;
margin-top: -2%;
}

.middleRow{
padding-top: 10%;
margin-top: 5%;
}

.navcolor{
background-color: transparent;
}

.navbar-default {
margin-top: 3%;
}

.navbar-nav {
float:none;
margin: 0 auto;
display: table;
table-layout: fixed;
text-align: center;
}

#btnTopInline{
display: inline-block;
float: right;
clear: none;
}

.btnRightSpace{
margin-right: 10%;
}

.logoFw{
width: 100%;
}

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

.footer li{
display: inline;
}

.copyright{
margin-top: 1%;
}

@media(min-width:768px) {
  .nav-collapse{
        display: inline;
  }   
 }
@media (min-width:320px) { 
/* smartphones, iPhone, portrait 480x320 phones */ 
.logoFw{
    margin-bottom: 20%;
}
}

Answer 1

Your style for the .pull-right is telling it to:

float:right !important

Looks like its coming from bootstrap.min.css line #5 when i inspect.

Change to:

.pull-right {
    float: none!important;
}

in your own custom stylesheet or loaded after bootstrap and it should work fine like this https://jsfiddle.net/zpdpsuLn/18/