css – 水平居中的zurb基础顶部栏菜单,多行项目垂直居中

使用Foundation,我正在尝试调整顶栏菜单,以使菜单项看起来像这样：

+-Parent container------------------------------------------------------------------+
|                                                                                   |
+-.top-bar--------------------------------------------------------------------------+
|              +-top-bar-section-+--------+--------+--------+--------+              |
|              |  Item  |  Item  |  Item  |  Item  |  Item  |  Item  |              |
|              |  menu  |  menu  |  menu  |  menu  |  menu  |  menu  |              |
|              |   01   |   02   |   03   |   04   |   05   |   06   |              |
|              +-top-bar-section-+--------+--------+--------+--------+              |
+-.top-bar--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜

这意味着：

>项目具有固定宽度
>项目可能有一行或多行(通常不超过3行),但它们必须始终垂直居中.
>所有项目高度必须与最高项目相同
>子菜单(下拉列表)必须在悬停项目下方打开

我已经尝试了几个选项(显示设置为table-cell或inline-block,垂直对齐设置为中间)并环顾网络,但我找不到满足上述所有要求的解决方案.

有人试过这样做吗？

解决方法

我无法解决您的问题,但我可以解释为什么Zurb Foundation很难解决.

>按钮的实现方式(并在顶部栏中重复使用)
Zurb Foundation有css显示：内联块设置.这意味着
您不能使用垂直对齐文本
vertical-align：middle这使得无法自动进行
使用多行文本对齐按钮.
>顶杆不是设计为具有均匀间隔的元件.您可以
使用ul.button-group.event-6来更接近您想要的布局,
但它不适用于所有约束.它旨在
有一个Logo,一个左菜单和一个右菜单.
>设置高度很容易,可以通过应用在css中完成
高度：例如80px到每个按钮.然而
多行文字对齐将在顶部.
>可以使用a.button.dropdown模拟子菜单,但是再次,它
不会满足你所有的限制
>基础中的topbar功能主要包含在a中
在foundation.topbar.js文件中的jQuery插件.这需要
很多修改工作的方式你想象和愿意
使你的topbar可能与以后的版本不兼容
基础.

在尝试使用特定框架实现所需设计时,您有以下几种选择：

>重新调整您的目标以适应框架的范围(即
减少约束数量或稍微改变设计
适应基金会的局限性)
>使用另一个提供此功能的框架,请查看
这个similar
post
关于使用bootstap做同样的事情
>寻找另一个库来完成所需的功能(in
你的情况可能看看jQuery Mobile
Navbars
>编写自己的功能

我这有助于解释一些原因,为什么你要做的事情不可能与Zurb Foundation 3/4.如果您解决了这个问题,那么如果您回复您的解决方案会很好,因为似乎很多其他人想要做类似的事情.