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的{ {1}}到该值，取决于您是否要使用ul定位。

如果没有在页面中看到列表的上下文，很难给出最精确的解决方案。

Here's a fiddle使用absolute定位和JavaScript。在此上下文中使用absolute和默认margin-top是棘手的，因为外部div会导致边距崩溃，但如果您可以使用它，那么您可以使用position进行水平居中，这是很好，因为那时你可以忽略宽度。

Answer 2

Flexbox可以这样做：

http://jsfiddle.net/vUSmV/2/

.flavours {
  min-height: 10em;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

}

将Flexbox与包装的内联列表项一起使用（请注意，包装会减少浏览器对Chrome，Opera和IE10的支持）：

http://jsfiddle.net/vUSmV/4/

.flavours {
  min-height: 10em;
  border: 1px solid;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-line-pack: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
@supports (flex-wrap: wrap) {
  .flavours {
    display: flex;
  }
}

.flavours li {
    margin: .5em 1em;
}

或者您可以将列表转换为table-cell元素：

http://jsfiddle.net/vUSmV/1/

.flavours {
  min-height: 10em;
  display: table-cell;
  vertical-align: middle;
}

Answer 3

我会亲自将父母div内的所有内容都集中在一起......工作JSFiddle can be found here。

<强> HTML：

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

<强> CSS：

div{
height: 200px;
display: table-cell;
vertical-align: middle;
border: 1px solid black;
}

如果您愿意，也可以将相同的样式添加到ul。

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

3 个答案: