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

Question

我有以下（示例）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 width="120" />
            <col width="120" />
        </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的垂直对齐？

提前致谢。

Answer 1

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

看到这个小提琴示例！

这里的问题是line-height 。

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

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

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

line-height: 26px;

设置line-height高等于浮动元素的height ，从而将文本与浮动元素的中间对齐并解决垂直对齐的视觉方面。

使用该工作解决方案 查看此 小提琴示例！

注意：一个元素不会影响另一个元素，因为您怀疑它们只是没有足够的声明来在它们之间进行连贯的对齐！

默认情况下，文本和图像与baseline对齐，如果没有给baseline line-height ，则baseline为font-size 。

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

问题描述

1 个解决方案

解决方案1
4 2012-06-05 12:22:48

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

问题描述

1 个解决方案

解决方案1 4 2012-06-05 12:22:48

解决方案1
4 2012-06-05 12:22:48