1

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

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

4

4 回答 4

0

如果您知道标题跨度和 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/

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

于 2012-08-04T10:39:19.380 回答
0

这是一个解决方案...

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

...在跨度和李上使用它

display:inline-block;
line-height:70px;
height: 70px;
于 2012-08-04T06:49:03.260 回答
0

不幸的是，垂直对齐仅适用于表格单元格（即：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>
于 2012-08-04T10:20:25.880 回答
0

另一种解决方案是添加另一个 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/

于 2016-02-23T05:17:06.207 回答