Html 如何在div中垂直居中放置跨距和列表？_Html_Css_Centering

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

html css

Html 如何在div中垂直居中放置跨距和列表？,html,css,centering,Html,Css,Centering,我在浏览器的顶部安装了一个div。div的宽度为100%，高度为90px。里面是一个文本范围，应该放在左边，一个水平列表应该放在右边。现在我将跨度向左浮动，列表向右浮动。如何将跨度和列表垂直居中放置在div中这里有一个解决方案。。。在span和li上使用此选项 display:inline-block; line-height:70px; height: 70px; 遗憾的是，垂直对齐仅适用于表格单元格，即：TD和TH元素。所以您必须使用TABLE来垂直对齐内容 <html>

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

这里有一个解决方案

。。。在span和li上使用此选项

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

遗憾的是，垂直对齐仅适用于表格单元格，即：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>

如果您知道标题span&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 */;

请看这里：

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

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

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

这里是工作区

本文对垂直定心技术进行了详细分析，在下面的回答中，除了“已知高度的孩子”技术外，我没有使用任何其他技术：