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-cell和vertical-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; 
}

<强> DEMO

div中的垂直居中列表

1 个答案: