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

Question

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

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

我这里有一个临时版本的网站 View It Here

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