在菜单中动态居中徽标答案

【问题标题】：Center logo dynamically in menu在菜单中动态居中徽标
【发布时间】：2015-10-20 03:53:37
【问题描述】：

我希望徽标保持在导航菜单项的中间，看起来徽标像this example 那样“拆分”了导航。重要的是，徽标也位于页面中间。所以菜单项围绕着它们，但标志是“固定的”。

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

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

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

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

【问题讨论】：

问题不清楚。能否请您详细说明，并提供Minimal, Complete, and Verifiable example。谢谢。
好的，我编辑我的问题。我希望现在它更清楚了。

标签： javascript css navigation center

【解决方案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

【讨论】：

“当只有 5 个正常列表项时，如何将徽标居中。或任何奇数”是 OP 似乎在问的问题。您的解决方案似乎没有解决这个问题。
标识不能在奇数个等宽项中居中。应该有偶数。示例： -- -- *** -- -- -- 星星永远不会在中心。居中的标志假定左边和右边的数字相同。不然不好看。
告诉 OP...这是他想要的。
真的很难描述我想要什么，我再次编辑我的帖子，但这里有一个“新”事实：重要的是，徽标也位于页面中间。所以菜单项围绕着它们，但标志是“固定的”。您的 html 对此没有帮助，因为徽标列表项不会停留在导航中间和页面中间。抱歉，我在帖子中错过了这一点！
@Lunokhod 在我们看来它看起来不错并不重要，这就是我的客户想要的，所以我需要这样做。

【解决方案2】：

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

<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;
}

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

【讨论】：

【解决方案3】：

弹性盒子可能适用于此。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：