垂直中心ul在div [英] Vertically center ul in 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规则，因为。我一直在搜索解决方案，并试图找到一种方式，但一切似乎都与我已经有规则冲突。

As the title says, I want to center the ul vertically inside the div. I cannot change the above CSS rules because. I've been googling solutions and trying to find a way, but everything seems to collide with the rules I already have.

有什么想法怎么做？

如果不是 #container div我使用了一行和一列的表格？

Would it help if instead of the #container div I used a table with one row and column?

推荐答案

请使用搜索功能在将来。完整的答案解释此处;这是您的方案的代码：

Please use the search function in the future. The full answer is explained here; this is the code for your scenario:

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

这三个元素必须嵌套， p>

The three elements have to be nested like so:

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

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

这篇关于垂直中心ul在div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！