响应式居中导航栏徽标，两侧均带有链接

Question

我有一个导航栏，该导航栏具有居中的图像并且在任一侧都有链接。我没有使用navbar-brand而是使用了li标签。

这是html代码

  <nav id="navbar" class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                    <i class="fa fa-bars"></i>
                </button>
        <a class="navbar-brand" href="index.html" >
        </a>
      </div>

<div class="collapse navbar-collapse  navbar-main-collapse">

  <ul class="nav navbar-nav">
    <li class="active"><a href="#intro">Home</a></li>
    <li><a href="#clienttestimonials">Testimonials</a></li>
    <li><a href="#contactus">Contact</a></li>
  <li class="navlogo"><a href="index.html"><img class="navimg" id="logo-navbar-middle" src="../images/logo.png"  alt="Logo Thing main logo"></a></li>

                <li><a id="whitetext">about</a></li>
                <li class="dropdown">
                  <a id="whitetext" href="#" class="dropdown-toggle" data-toggle="dropdown">Our Work<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="photocategory.html">Photo's</a></li>
                    <li><a href="videocategory.html">Video's</a></li>
                      <li><a href="animationcategory.html">Animation's</a></li>

                  </ul>
                </li>

              <li><a id="whitetext">FAQ's</a></li>
  <li><a id="whitetext" href="rentals.html" >Rental's</a></li>



  </ul>

    </div>
    </div>



     </nav>

任何人都可以提供解决方案。当宽度小于768px（即导航栏折叠时）时，可以使用javascript添加类。

这是CSS代码

@media (min-width:992px) {

  .navimg{


    width:225px;
  }

.navbar-custom .navbar-nav {

  width: 100%;
  text-align: center;
}
.navbar-custom .navbar-nav   > li {
    display: inline-block;
    float: none;
  }
  .navbar-custom .navbar-nav   > li > a {
      padding-left: 15px;
      padding-right: 15px;
    }


}

@media (min-width: 768px) and (max-width: 992px) {

  .navimg{


    width:160px;
  }

  .navbar-custom .navbar-nav {
  /* //  background: #ededed; */
    width: 100%;
    text-align: center;
  }
  .navbar-custom .navbar-nav   > li {
      display: inline-block;
      float: none;
    }
    .navbar-custom .navbar-nav   > li > a {
        padding-left: 10px;
        padding-right: 10px;
      }


     .navbar-custom ul.nav li a {
        font-size: 10px;

        font-weight: 700;
      }
}