4

我有一个简单的无序列表，如下所示：

<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，项目将在水平和垂直方向上处于死点。目前他们只是定位在中心顶部。

4

3 回答 3

3

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

如果您不想使用表格并且无法使用display:table-cell浏览器支持，那么您可能需要使用 JavaScript。同样，我会尝试将 ul 放在容器中，而不是li. ul方法一般是找到容器的高度，找到 的高度ul，取差值，将其切成两半，然后将 的top或 的margin-top值设置ul为该值，这取决于您是否要使用absolute定位。

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

这是一个使用absolute定位和 JavaScript的小提琴。在这种情况下使用margin-top和默认值position是棘手的，因为外部 div 的边距折叠，但如果你可以使用它，那么你可以使用它margin: 0 auto来做水平居中，这很好，因为你可以忽略宽度。

于 2013-04-03T14:14:22.763 回答
3

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;
}

或者您可以将列表转换为表格单元格元素：

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

.flavours {
  min-height: 10em;
  display: table-cell;
  vertical-align: middle;
}
于 2013-04-03T14:18:47.223 回答
1

我个人会将所有内容都集中在父级中...可以在此处找到div工作的JSFiddle 。

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或者，如果您愿意，也可以添加相同的样式。

于 2013-04-03T14:17:55.907 回答