在 div 中垂直居中 ul

Question

在 div 中垂直居中 ul

11

这就是我的代码的样子。

#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规则。我一直在搜索解决方案并尝试找到方法，但是似乎所有的方法都与我已经有的规则冲突。

有什么办法吗？

如果我使用一个行列只有一个的表格，会有帮助吗？

- Banana

使用绝对定位，只有在事先知道元素高度（或使用JavaScript测量）的情况下才能这样做。 - CBroe

我可以做到。请问您能否提供更多细节？ - Banana

尝试在margin:0;中添加:auto;。 - DiederikEEn

可能是使用margin:auto垂直对齐div的重复问题。 - Oleg

你仅限于使用CSS，不考虑JavaScript的解决方案吗？ - ianace

5个回答

3

在CSS中，垂直居中一个

或其他容器是非常棘手的，以下是您可以选择的选项。

您知道容器的高度

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

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

因此，我们基本上将其放置在中间，然后使用等于高度一半的负边距进行偏移。您的父容器需要具有position: relative。

您不知道容器的确切高度

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

更多信息请点击此处.

- MMM

1

我已经尽力解释了为什么margin-top不能是auto在这里 - 以及比使用绝对定位更优雅的垂直居中内容的方法 :) - Oleg

3

您可以使用 flex 让您的 ul 垂直、水平或两者都居中，例如：

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

- Linh

0

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

});

- Rob

为了排除故障，我会先尝试让最基本的解决方案正常工作，然后再添加其他可能影响定位的内容。既然说CSS不能被修改，那么你可以通过jQuery将其删除。 - Rob

我的意思是我需要CSS用于其他目的，而不是说它几乎不可能被移除 :D - Banana

尽可能避免使用JavaScript进行样式设置，特别是当可以使用CSS完成时。这是一个好的实践，以避免所谓的“未经样式处理的内容闪烁”。 - Oleg

是的，也许吧，但这是唯一能够满足我的需求的东西。 - Banana

我了解你所说的未经样式处理的内容闪烁问题，但我认为最终取决于该内容位于何处。jQuery内置了许多CSS功能，有很多原因，就像你所说的，尽可能不要使用JavaScript，但在这种情况下，也许这正是所需的。而且这个解决方案似乎是有效的。 - Rob

0

现在你可以让父容器显示为flex并且使用align-items:center属性。这应该可以解决问题。尽管旧版浏览器不支持flexbox属性。

- Sebastian Cruz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oleg · 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/