Javascript 在菜单中动态居中徽标我希望这个标志在导航中的菜单项中间，好像标志“拆开”导航一样。重要的是，标志也停留在页面的中间。因此，菜单项环绕着它们，但徽标是“固定”的_Javascript_Css_Navigation_Center

Javascript 在菜单中动态居中徽标我希望这个标志在导航中的菜单项中间，好像标志“拆开”导航一样。重要的是，标志也停留在页面的中间。因此，菜单项环绕着它们，但徽标是“固定”的

javascript css navigation

Javascript 在菜单中动态居中徽标我希望这个标志在导航中的菜单项中间，好像标志“拆开”导航一样。重要的是，标志也停留在页面的中间。因此，菜单项环绕着它们，但徽标是“固定”的,javascript,css,navigation,center,Javascript,Css,Navigation,Center,我使用javascript在菜单项中间动态添加一个分隔符div（当有六个菜单项时，分隔符位于第三个菜单项之后），以创建我上面描述的效果 .seperator { display: inline-block; height: 10px; margin-left: 69px; margin-right: 206px; width: 10px; } 但是，当编辑器向导航添加新菜单项或重命名一个项（CMS）时，徽标不再居中。对于固定的边距，它将不起作用，但我不知道如何动态计算宽度或边距大小。

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

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

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

因此，我需要一个脚本或一个有用的想法来完成这项工作。

响应式解决方案，纯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>


navBar先生{
宽度：100%；
保证金：0自动；
}
.菜单{
宽度：100%；
}
.菜单td{
文本对齐：居中；
}
.菜单.标志{
宽度：22%；
}
.menu.logo img{
宽度：200px；
最大宽度：100%；
}
.左，.右{
宽度：39%；
}
.嵌套{
宽度：100%；
}
.td{
文本对齐：居中；
}

响应式解决方案，纯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>


navBar先生{
宽度：100%；
保证金：0自动；
}
.菜单{
宽度：100%；
}
.菜单td{
文本对齐：居中；
}
.菜单.标志{
宽度：22%；
}
.menu.logo img{
宽度：200px；
最大宽度：100%；
}
.左，.右{
宽度：39%；
}
.嵌套{
宽度：100%；
}
.td{
文本对齐：居中；
}

flex box可能适用于此。

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

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

这不是最好的解决方案，但它可以工作，响应速度快，而且旧浏览器没有问题。如果有人找到一个真正好的解决方案与一个单一的导航，请让我知道

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

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

这不是最好的解决方案，但它可以工作，响应速度快，而且旧浏览器没有问题。如果有人找到一个真正好的解决方案与一个单一的导航，请让我知道

问题还不清楚。请你详细说明一下，并提供一份报告。谢谢。好的，我编辑我的问题。我希望现在情况更清楚了，问题还不清楚。请你详细说明一下，并提供一份报告。谢谢。好的，我编辑我的问题。我希望现在它更清楚了。“当只有5个正常的列表项……或任何奇数项时，如何将徽标居中”似乎是OP所问的问题。您的解决方案似乎没有解决这个问题。徽标不能是奇数个等宽项目的中心。应该有偶数。示例：-----***----星星永远不会在中心。居中的徽标假定其左侧和右侧的数字相同。否则它看起来不太好。告诉OP。这是他想要的。很难描述我想要什么，我再次编辑我的帖子，但是这里有一个“新”事实：重要的是，这个标志也停留在页面的中间。因此，菜单项环绕着它们，但徽标是“固定”的。你的HTML没有帮助我，因为徽标列表项不会停留在导航的中间，也不会停留在页面的中间。很抱歉，我在帖子中漏掉了@Lunokhod在我们的竞争中是否好看并不重要，这是我的客户想要的，所以我需要这样做。“当只有5个正常列表项……或任何奇数时，你如何居中设置徽标”似乎是OP所问的问题。您的解决方案似乎没有解决这个问题。徽标不能是奇数个等宽项目的中心。应该有偶数。示例：-----***----星星永远不会在中心。居中的徽标假定其左侧和右侧的数字相同。否则它看起来不太好。告诉OP。这是他想要的。很难描述我想要什么，我再次编辑我的帖子，但是这里有一个“新”事实：重要的是，这个标志也停留在页面的中间。因此，菜单项环绕着它们，但徽标是“固定”的。你的HTML没有帮助我，因为徽标列表项不会停留在导航的中间，也不会停留在页面的中间。很抱歉，我在帖子中漏掉了@Lunokhod在我们的竞争中是否好看并不重要，这是我的客户想要的，所以我需要这样做。