如何使用vertical-align：middle将UL转换为3 col表

Question

不幸的是，我正在使用的CMS吐出<ul> s作为导航。

我有一个很棒的菜单，我希望在3列中显示。为此，我有：

#mainnav LI UL {
  display: table;
  width: 600px;
  height: 250px;
}
#mainnav LI UL LI{
  display: table-row;
  width: 33%;
}
#mainnav LI UL LI A{
  display: table-cell;
  vertical-align: middle;
}

这有点奏效，但我希望每个菜单项都显示vertical-align: middle;

正如您在图像中看到的那样，有一些大的间隙，其中一些项目延伸到两行。

有人知道实现这个目标的方法吗？

Answer 1

我建议你制作另一个级别的UL＆amp; LI这样你就可以达到你所需要的。像

#mainnav LI > UL > LI{
  display: table-row;
  width: 33%;
}
#mainnav LI > UL > LI > UL{
  vertical-align: middle;
}
#mainnav LI > UL > LI > UL > LI{
  vertical-align: middle;
}
#mainnav LI > UL > LI > UL > LI > A{
  display: table-cell;
  vertical-align: middle;
}