html - 在 div 中垂直居中列表

Question

我有一个固定尺寸的 div 和一个无序列表。列表的项目水平放置，一个接一个。我正在尝试制作的是一个滑块，它显示一个又一个列表元素。我不能做的是将列表和元素垂直居中在 div 内，因为我不知道列表的高度。

这是我的代码：

HTML

<div id="container">
   <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
   </ul>
</div>

CSS

#container {
  width: 584px;
  height: 50px;
  position: relative;
  overflow: hidden;
}

#container ul {
  position: absolute;
  margin: 0;
  padding: 0;
  width: 3504px;
}

#container ul li {
  width: 584px;
  float: left;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

任何可能的方法在 CSS 中做到这一点？

Answer 1

我真的不明白溢出隐藏和巨大宽度值的必要性，但我已经做到了你所期望的。

使用display:table-cellandvertical-align:middle您可以将内容垂直居中对齐。

#container {
  width: 584px;
  height: 50px;
  position: relative;
}
#container ul {
  margin: 0;
  padding: 0;
}
#container ul li {
    width: 100px;
    background:grey; display:table-cell;
    border:white solid 2px;
    vertical-align:middle;
    margin: 0;
    padding: 0; 
}

演示