表格单元格中的垂直对齐以及浮动 div

Posted 2023-03-05

技术标签:

【中文标题】表格单元格中的垂直对齐以及浮动 div【英文标题】：Vertical alignment in table-cell together with floating div 【发布时间】：2012-06-08 20:34:19 【问题描述】：

我有以下（示例）html 代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>TH-Alignment</title>
    <style type="text/css">
        th 
            border: 1px solid #333;
            vertical-align: middle;
        
        div.sb 
            float: right;
            width: 4px;
            height: 26px;
            background-color: #999;
        
    </style>
  </head>
  <body>
    <table cellspacing="0" cellpadding="0">
        <colgroup>
            <col  />
            <col  />
        </colgroup>
        <thead>
            <tr>
                <th>
                    <div class="sb"></div>
                    <div>Heading 1</div>
                </th>
                <th>
                    <div>Heading 2</div>
                </th>
            </tr>
        </thead>
    </table>
  </body>
</html>

第二列的 div 是垂直居中的，第一列的 div 不是（始终位于表格单元格的顶部）。为什么浮动的div里面第一列会影响表格单元格中另一个 div 的垂直对齐方式吗？

提前致谢。

【问题讨论】：

+1 好问题。对您的代码进行了一些扩展（th 上的一些高度，div 上的一些显示，以及一些用于调试的边框），请参阅this fiddle。似乎第一个中的内容是 v-aligned，但第一个 div 出于某种原因位于行首... 我认为答案在于in this W3 table layout spec。如果没有人超过我，我可能会在有时间的时候尝试想出一个真正的答案和演示。我想知道<div>是否允许在<th>中读取w3.org/TR/html4/struct/tables.html#h-11.2.6 【参考方案1】：

如果您扩大th 的高度，您会注意到元素仍然垂直对齐到中间。

看到这个Fiddle Example！

这里的问题是line-height。

由于您在第一个 th 上有多个元素，并且其中一个元素定义了 height，因此所有元素都与 th 的中间对齐，但在它们之间，它们是对齐的到它们当前line-height 的高度，该高度未定义，并且由font-size 或父元素定义计算。

由于您的浮动元素具有26px 的height，因此它会向下增长，但是没有定义line-height 文本的元素因此height 等于内部文本提供的font-size ，因此永远不会到达其浮动兄弟的中间。

要解决此问题，您需要使用：