在div中垂直居中ul

Question

这就是我的代码.

HTML

#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

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

正如标题所说,我想在div中垂直居中.我无法更改上面的CSS规则,因为.我一直在谷歌搜索解决方案并试图找到一种方法,但一切似乎都与我已经拥有的规则相冲突.

知道怎么做吗？

如果不使用#containerdiv我会使用带有一行和一列的表吗？

Answer 1

请将来使用搜索功能.这里解释了完整的答案; 这是您的方案的代码:

.container {
  display: table;
  height: 100%;
  position: absolute;
  overflow: hidden;
  width: 100%;}
.helper {
  #position: absolute; /*a variation of an "lte ie7" hack*/
  #top: 50%;
  display: table-cell;
  vertical-align: middle;}
ul{
  #position: relative;
  #top: -50%;
  margin:0 auto;
  width:200px;}

这三个元素必须嵌套如下:

<div class="container">
  <div class="helper">
    <ul><!--stuff--></ul>
  </div>
</div>

http://jsfiddle.net/ovfiddle/yVAW9/

Answer 2

如果你可以添加 jQuery 库，你可以尝试这个，

$(document).ready(function(){

    // Remove li float
    $("#container ul li").css("float", "none");

    // Get the full height of the UL
    var ulheight = $("#container ul li")[0].scrollHeight;

    // Based on the height of the container being 50px you can position the UL accordingly
    var pushdown = (50-ulheight)/2;
    $("#container ul li").css("top", pushdown);

});