如何在div中垂直居中放置跨度和列表？

Question

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

http://jsfiddle.net/4keeS/6/

Answer 1

这是一个解决方案...

http://jsfiddle.net/4keeS/7/

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

如果您知道标题跨度和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中垂直居中放置跨度和列表？

问题描述

4 个解决方案

解决方案1
0 2012-08-04 06:49:03

解决方案2
0 2012-08-04 10:20:25

解决方案3
0 2012-08-04 10:39:19

解决方案4
0 2016-02-23 05:17:06

如何在div中垂直居中放置跨度和列表？

问题描述

4 个解决方案

解决方案1 0 2012-08-04 06:49:03

解决方案2 0 2012-08-04 10:20:25

解决方案3 0 2012-08-04 10:39:19

解决方案4 0 2016-02-23 05:17:06

解决方案1
0 2012-08-04 06:49:03

解决方案2
0 2012-08-04 10:20:25

解决方案3
0 2012-08-04 10:39:19

解决方案4
0 2016-02-23 05:17:06