在菜单中动态居中徽标

Question

我希望徽标保留在导航中菜单项的中间，它看起来像 "splits" 导航中的徽标 this example。重要的是，徽标也应位于页面中间。所以菜单项围绕着它们，但徽标是 "fixed"。

我用 javascript 动态添加一个分隔符 div 到菜单项的中间（当有六个项目时，分隔符保留在第三个之后）以创建我上面描述的效果。

.seperator {
 display: inline-block;
 height: 10px;
 margin-left: 69px;
 margin-right: 206px;
 width: 10px;
}

但是当编辑器在导航中添加新的菜单项或重命名项目（CMS）时，徽标不再居中。对于固定边距，它不起作用，但我不知道如何动态计算宽度或边距大小。我想通过 javascript 添加值。我认为这是唯一可行的方法。

所以我需要一个脚本或一个有用的想法来做到这一点。

Answer 1

响应式解决方案，裸 HTML & CSS:

<div class="navBar">
    <table class="menu">
        <tr>
            <td class="left">
                <table class="nested" >
                    <tr>
                        <td><a href="#">first</a></td>
                        <td><a href="#">second</a></td>
                    </tr>
                </table>
            </td>
            <td class="logo">
                <a href="#">
                    <img src="http://i48.tinypic.com/2mob6nb.png" alt="Michigan State" />
                </a>
            </td>
            <td class="right">
                <table class="nested" >
                    <tr>
                        <td><a href="#">third</a></td>
                        <td><a href="#">fourth</a></td>
                        <td><a href="#">fifth</a></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

<style>
    .navBar {
        width: 100%;
        margin: 0 auto;
    }
    .menu {
        width: 100%;
    }
    .menu td {
        text-align: center;
    }
    .menu .logo {
        width: 22%;
    }
    .menu .logo img {
        width: 200px;
        max-width: 100%;
    }
    .left, .right {
        width: 39%;
    }
    .nested {
        width: 100%;
    }
    .nested td {
        text-align: center;
    }
</style>

View on Codepen

Answer 2

flex box 可能适用于此。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

好的，我尝试了一些方法，但我不想使用两个导航，但我做到了：

<div class="inner">
 <div class="desktop_navi">
  <ul>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Menu</a></li>
  </ul>             
 </div>            
 <div class="logo"><a href="#"><img width="281" height="280" src=""></a></div>   
 <div class="desktop_navi">
  <ul>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Menu</a></li> 
  </ul>             
 </div>    
</div>

那是我的新 HTML- 标记。这里我使用的样式：

.inner {
  display: table;
  width: 100%;
}
.inner .desktop_navi,.logo {
  display: table-cell;
}
.inner .desktop_navi {
  text-align: left;
}
.header .inner .desktop_navi:first-child {
  text-align: right;
}

这不是最佳解决方案，但它有效，响应迅速，并且在旧版浏览器中没有问题。如果有人通过单一导航找到真正好的解决方案，请告诉我！

在菜单中动态居中徽标

Center logo dynamically in menu

javascript

css

navigation

center