html - 在 div 中垂直居中 ul

Question

这就是我的代码的样子。

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

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

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

知道怎么做吗？

#container如果我使用具有一行和一列的表格而不是 div 会有所帮助吗？

score 9 · Accepted Answer

以后请使用搜索功能。完整的答案在这里解释；这是您的方案的代码：

.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/

score 3 · Accepted Answer

在 CSS 中“垂直居中”adiv或其他容器非常棘手，这是您的选择。

你知道你的容器的高度

如果您知道容器的高度，则可以执行以下操作：

#container {
    position: absolute;
    top: 50%;
    margin-top: -half_of_container_height_here;
}

所以我们基本上放在中间，然后使用等于高度一半的负边距来偏移它。你的父容器需要有position: relative.

您不知道容器的确切高度

在这种情况下，您需要使用 JavaScript 并计算适当的边距（不幸的是，您不能使用margin-top: auto或类似的东西）。

更多信息在这里。

score 3 · Accepted Answer

You can use flex to make your ul center vertical, horizontal or both like

.container{
  background:#f00;
  height:150px;
  display:flex;
  align-items:center;
  /*justify-content:center;=>will make ul center horizontal*/
}
.container ul{
  background:#00f;
}

<div class="container">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

score 0 · Accepted Answer

如果你可以添加 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);

});

score 0 · Accepted Answer

现在你可以让父容器 display:flex 和 align-items:center。那应该行得通。尽管旧版浏览器不支持 flexbox 属性。

html - 在 div 中垂直居中 ul

5 回答 5

Related

Reference