Question

我有一个固定在浏览器顶部的div。 div的宽度为100％，高度为90px。里面是一个应该在左边的文本范围和一个应该在右边的水平列表。现在我将范围浮动到左侧，列表浮动到右侧。如何将范围和列表垂直居中在div中？

Answer 1

这是一个解决方案......

...在span和li

上使用它

display:inline-block;
line-height:70px;
height: 70px;

Answer 2

不幸的是，垂直对齐仅适用于表格单元格（即：TD和TH元素）。
因此，您必须使用TABLE才能垂直对齐内容。

<html>
<head>
  <style>
    .text         { float: left; }
    .list         { list-style: none; float: right; margin: 0; }
    .list li      { float: left; }
    #vdivwrap     { width: 100%; }
    #vdivcontent  { height:90px; vertical-align: center; background:#8c8; }
  </style>
</head>
<body>
  <table id="vdivwrap" border="0" cellspacing="0" cellpadding="0">
    <td id="vdivcontent">
      <span class="text">[text span]</span>
      <ul class="list">
        <li>[list item 1]</li>
        <li>[list item 2]</li>
      </ul>
    </td>
  </table>
</body>
</html>

Answer 3

如果您知道标题范围的高度＆amp; UL内容，您可以使用

position:absolute /* or relative */;
top:50%;
margin-top: -X /* where X is half the height of your content. That's a negative margin pulling the content up so it's center aligns with the center of the parent div */;

见这里：http://jsfiddle.net/XAgyv/1/

我没有找到任何好的方法来做到这一点，而不知道内容的高度是垂直居中的 - 我期待看到其他答案。

Answer 4

另一个解决方案是添加另一个css规则，如下所示

span, ul {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

这是工作jsfiddle http://jsfiddle.net/logiccanvas/4keeS/9/

如何在div中垂直居中一个span和一个列表？

4 个答案: