html - 在 'li' 中垂直对齐 'ul' 中间

Question

我有一个像这样的简单无序列表:

<ul class="flavours">   
     <li>Chocolate</li>
     <li>Caramel</li>
     <li>Watermelon</li>
</ul>

<ul class="flavours">有一个 min-height的 200px它增长得越多<li>通过 jQuery ui 拖放库将元素添加到列表中。

当只有一两个时<li>列表中的元素，我怎样才能在整个 <ul> 的中间垂直对齐这些元素？ .所以当高度是200px时这些元素将处于死点，水平和垂直。目前他们只是位于中心顶部。

Answer 1

如果您想要跨浏览器支持，尤其是对于 IE 和旧浏览器，将内容垂直居中往往是一件棘手的事情 - 除非您愿意使用 JavaScript 或表格。所有常见的浏览器都支持表格单元格内的垂直居中，因此一种选择是忘记居中 <li> <ul> 中的元素而是创建一个 table与 height: 100%里面有一个单元格，带有 vertical-align: middle .这不是一个流行的答案，但有时使用表格是最实用的，正如在 this SO response 中有充分论证的那样.

如果您不想使用表格并且不能使用 display:table-cell对于浏览器支持，那么您可能需要使用 JavaScript。同样，我会尝试将 ul 放在容器的中心，而不是 li。在ul .做法一般是求容器的高度，求ul的高度，取差，将其减半，并设置 top或 margin-top的 ul到该值，具体取决于您是否要使用 absolute定位与否。

如果不查看页面中列表的上下文，则很难给出确切的最佳解决方案。

Here's a fiddle使用 absolute定位和JavaScript。使用 margin-top和默认 position在这种情况下是棘手的，因为边距与外部 div 一起折叠，但如果你可以使用它，那么你可以使用 margin: 0 auto进行水平居中，这很好，因为这样您就可以忽略宽度。