css - 水平居中 zurb 基础顶部栏菜单，多行元素垂直居中

Question

使用 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--------------------------------------------------------------------------+
|                                                                                   |
|                                                                                   |
˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜˜

这意味着:

1. 元素有固定的宽度
2. 元素可以有一行或多行(通常不超过 3 行)，但它们必须始终垂直居中。
3. 所有元素高度必须与最高元素相同
4. 子菜单(下拉菜单)必须在悬停项下方打开

我尝试了几个选项(显示设置为表格单元格或内联 block ，垂直对齐设置为中间)并环顾了网络，但我找不到满足上述所有要求的解决方案。

有人试过这样做吗？

Answer 1

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

• 按钮的实现方式(以及在顶部栏中重复使用)Zurb Foundation 设置了 css display:inline-block。这意味着您不能使用垂直对齐文本vertical-align:middle 这使得无法自动将按钮与多行文本对齐。

• 顶部栏未设计为具有均匀间隔的元素。你可以使用 ul.button-group.event-6 来接近您想要的布局，但它不适用于您的所有约束。它旨在有一个 Logo，一个左菜单和一个右菜单。

• 设置高度很容易，可以通过应用在 css 中完成height:80px 例如每个按钮。然而多行文本对齐到顶部。

• 子菜单可以用 a.button.dropdown 模拟，但同样，它不会满足您的所有限制条件

• foundation 中的顶部栏功能主要包含在foundation.topbar.js 文件中的 jQuery 插件。这需要大量修改以按照您设想的方式工作使您的顶部栏可能与 future 和过去的版本不兼容基金会。

当您尝试让您想要的设计与特定框架一起工作时，您有两种选择:

1. 重新调整您的目标以适应框架的限制(即减少约束数量或稍微更改设计以适应基金会的限制)

2. 使用提供此功能的另一个框架，查看这个similarpost关于用 bootstap 做同样的事情

3. 寻找另一个库来完成所需的功能(在你的情况可能看看jQuery MobileNavbars

4. 编写自己的功能

这有助于解释 Zurb Foundation 3/4 无法实现您尝试做的事情的一些原因。如果您解决了问题，那么如果您发回您的解决方案就太好了，因为似乎很多其他人都想做类似的事情。