Html 保持标识中心在屏幕中间

我正在为我的网站制作导航栏菜单，但我的工作效率很高。这个概念是在Navar的中间有标识，左边的三个菜单选项，右边的另外三个菜单。

<header id="top-header">
  <div class="row">
    <div class="large-12 columns">
      <div class="logo"></div>
      <ul class="menu" id="nav-menu">
         <li><a href="#">MENU 1</a></li>
         <li><a href="#">MENU 2</a></li>
         <li><a href="#">MENU 3</a></li>
         <li><a href="#">MENU 4</a></li>
         <li><a href="#">MENU 5</a></li>
         <li><a href="#">MENU 6</a></li>
     </ul>
    </div>
  </div>
</header>

但是，我现在的问题是带有徽标的图像。它不会停留在屏幕中央。图像是整个导航栏，中间有徽标，所以我希望在浏览器更改分辨率时垂直调整图像大小

#top-header .logo {
    background-color: transparent;
    background-image: url("img/menubar_logo.png");
    height: 100%;
    padding-left: 10px;
    position: absolute;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 1;
}

---

我会包括作为中间列表元素的标志，并把它变成一个人造表。这样就无需为其中的元素定义宽度

HTML

---

当我在这里传递代码时更改类的名称是一个输入错误。谢谢你是大12列和你自己的类，因为它们不是引导的一部分。bootstrap列应该是col-lg-12。有来自使用Twitter bootstrap的wordpress模板的。它们有相同的CSS，但名称略有不同。不幸的是，我无法检查这个答案。菜单的结构是从表中自动创建的。我可以更改div和CSS，但是菜单太复杂，无法进入。

#top-header .logo {
    background-color: transparent;
    background-image: url("img/menubar_logo.png");
    height: 100%;
    padding-left: 10px;
    position: absolute;
    transition: all 0.3s ease 0s;
    width: 100%;
    z-index: 1;
}

<header id="top-header">
  <div class="row">
    <div class="large-12 columns">
      <ul class="menu" id="nav-menu">
         <li><a href="#">MENU 1</a></li>
         <li><a href="#">MENU 2</a></li>
         <li><a href="#">MENU 3</a></li>
         <li><div class="logo"></div></li>
         <li><a href="#">MENU 4</a></li>
         <li><a href="#">MENU 5</a></li>
         <li><a href="#">MENU 6</a></li>
       </ul>
    </div>
  </div>
</header>

.logo {
  width:100px;
  height:30px;
  background:#ff0;
}
#top-header ul {
  display:table;
  width:100%;
  margin:0;
  padding:0;
}
#top-header ul > li {
  display: table-cell;
  vertical-align:middle;
  margin:0;
  padding:0;
  text-align:center;
}
#top-header ul > li a {
  display:block;
  padding:3px 5px;
}