css - 具有多行元素和垂直对齐的水平导航

Question

我想创建一个水平导航，有时会有多行链接文本(并非总是如此；它是动态生成的)，并且所有文本都垂直居中。

需要注意的是，我还想制作导航，以便 a 元素填满它们的整个包含元素，以便每个链接的可点击和悬停区域更大。

仅使用 CSS 是否可行？谢谢。

Answer 1

完全公开:我通常不使用这种技术，但如果您认为有时链接会换行，这是一个非常简单的解决方案。另外，这个 does not work in ie7 and below

---

每个前端开发人员都会告诉您，对非表格数据使用表格是禁忌，但使用表格样式会在这方面为您提供帮助。

如果您将 display:table; 应用到包含的 div/ul/whatever，并将 display:table-cell 应用到导航中的每个元素，那么您将能够使用 vertical-align:middle; 等属性。

---

您知道导航中将包含多少元素吗？如果没有，请创建一些如下所示的 css 属性:

.container.items-2 .item { width 50%; }
.container.items-3 .item { width 33%; }
.container.items-4 .item { width 25%; }
.container.items-5 .item { width 20%; }
/* ...etc... */