4

我有以下（示例）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 的垂直对齐方式？

提前致谢。

4

1 回答 1

4

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

请参阅此小提琴示例！

这里的问题是line-height.

由于您在 first 上有多个元素th，并且其中一个元素已height定义，所有元素都对齐到中间th但在它们之间，它们对齐到其 current 的高度line-height，这是未定义和由font-size或父元素定义计算。

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

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

line-height: 26px;

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

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

注意： 一个元素并没有像您怀疑的那样影响另一个元素，它们只是没有足够的声明来使它们之间保持一致！

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

于 2012-06-05T12:22:48.607 回答