css - 以徽标为中心的响应式导航菜单

Question

我已经以老式的方式找到了解决这个问题的方法，但是我有一个响应式主题，我正在为个人博客进行调整，并想弄清楚是否有可能有一个带有居中图像的导航菜单，并且菜单项浮动到无需使用两个单独的导航菜单。

这就是我现在所拥有的，所有 li 项目都在一个菜单中。我仍在试图弄清楚如何将 UL 置于这种响应式设计中并使其相应扩展。我已经看到了如何使用 2 个导航菜单执行此操作的示例，但想知道这是否可以通过一个菜单上的响应式设计来实现，因为我找不到好的示例或教程。

我确实有网站的临时版本在这里查看它

Answer 1

如果你只是把居中的图像放在 ul 的中间呢？给它自己的 li 类，并相应地设置它的样式。

有点像这样http://jsfiddle.net/qWYGR/

CSS 没有出现在我的 jsfiddle 中。添加这个

​ul {
 display:inline;
 list-style-type:none;        
}
li{
 float:left;   
}
li a {
 float:left;
padding:5px;    
    height:35px;
    width:50px;
    background:red;
}
.logo img {
 height:100%;
}

​</p>