centering a logo in bootstrap navbar

Question

I have this very big bootstrap NavBar where I have 2 logos, the one I want to play with, is the one in the comment in the code below, all I want is center that logo in and keep it centered at any resolution and without using the col-offset class.

I've been trying to do that in many ways already but I can't get anything depending on what I use. So I want you to give me some suggestions.

this is how I have it so far

<nav class="navbar navbar-default navbar-fixed-top capilleira-navbar ng-cloak"
     role="navigation"
     ng-controller="MenuController">

  <!-- this is the LOGO I want to center -->      

  <div class="row" ng-show="!displayLogout">
    <div class="col-md-12">
      <a class="navbar-brand text-center" href="#/lines">
        <img src="/images/logos/logo.png" alt="Click N' Gamble Logo">
      </a>
    </div>
  </div>

  <!-- ********************************* --> 

  <div class="container"
       ng-show="displayLogout">
    <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>
      <a class="navbar-brand" href="#/lines"><img src="/images/logos/logo.png" alt="Click N' Gamble Logo"></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a class="hover-nieve" href="#/lines">Sports <span class="sr-only">(current)</span></a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Poker</a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Casino</a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Horses</a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Info</a></li>
      </ul>
      <div class="navbar-form navbar-right">
        <div class="form-group">
          <input id="search-box"
                 ng-change="broadcastSearchBar()"
                 ng-model="search" class="search-box"
                 placeholder="Search lines..."
                 type="search">
          <label for="search-box">
            <span class="glyphicon glyphicon-search search-icon navbar-icon"
                  ng-show="!search.length">
            </span>
            <span class="glyphicon glyphicon-remove blue-icon"
                  ng-show="search.length"
                  ng-click="search = ''; broadcastSearchBar()">
            </span>
          </label>
        </div>
        <div class="form-group">
          <div class="sideborders"></div>
          <button type="button" class="btn btn-blue"
                  title="Account Figures" data-placement="bottom"
                  data-template="views/accFiguresModal.html"
                  data-animation="fx-bounce-down" ng-controller="AccountFiguresCtrl"
                  ng-click="displayAccountFigures();" bs-popover=""
                  data-auto-close="true">Account Figures
          </button>
          <button type="button" class="btn btn-red" title="Are you sure?"
                  data-placement="bottom" data-template="views/logoutModal.html"
                  data-animation="fx-bounce-down" data-auto-close="1"
                  bs-popover="">Log out
            <i class="fa fa-sign-out fa-lg"></i>
          </button>
        </div>
      </div>
    </div>
  </div><!--/.navbar-collapse -->
</nav>

Answer 1

Just add a different id to the logo on top and modify the float and margin from your css. Here's a jsfiddle showing you what I'm talking about: http://jsfiddle.net/shdd611y/1/