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

Question

I have the following (sample) html code: 我有以下（示例）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>

The div in the second column is vertically centered, the div in the first column not (always positioned at the top of the table-cell). 第二列中的div是垂直居中的，第一列中的div不是（始终位于表格单元格的顶部）。 Why does the floating div inside column one influence the vertical alignment of the other div within the table cell? 为什么第一列中的浮动div会影响表格单元格中另一个div的垂直对齐？

Thanks in advance. 提前致谢。

Answer 1

If you expand the height for the th , you will notice that elements are still vertically aligned to the middle. 如果展开th的高度，您会注意到元素仍然垂直对齐到中间。

See this Fiddle Example ! 看到这个小提琴示例！

The issue here is the line-height . 这里的问题是line-height 。

Since you've got more that one element on that first th , and one of those elements has a height defined, all elements are aligned to the middle of the th but between them, they are aligned to the height of their current line-height , which is not defined and being calculated either by the font-size or a parent element definition. 由于您在th一个元素上有更多元素，并且其中一个元素具有定义的height ，因此所有元素都对齐到th的中间，但在它们之间，它们与当前line-height的高度对齐，未定义并由font-size或父元素定义计算。

Since your floated element has a height of 26px , it grows down, but the element with the text as no line-height defined so it's height is equal to the font-size provided by the text inside, thus never getting to the middle of its floated sibling. 由于浮动元素的height为26px ，因此它会向下增长，但是文本的元素没有定义line-height因此它的height等于文本内部提供的font-size ，因此永远不会到达其中间漂浮的兄弟姐妹。

To fix this, you need to use: 要解决此问题，您需要使用：

line-height: 26px;

To set a line-height equal to the height of your floated element, thus aligning the text to the middle of the floated element and solving the visual aspect of the vertical alignment. 设置line-height高等于浮动元素的height ，从而将文本与浮动元素的中间对齐并解决垂直对齐的视觉方面。

See this Fiddle Example with that working solution ! 使用该工作解决方案 查看此 小提琴示例！

Note: One element is not affecting the other as you suspect, they just don't have enough declarations to have a coherent alignment among them! 注意：一个元素不会影响另一个元素，因为您怀疑它们只是没有足够的声明来在它们之间进行连贯的对齐！

By default text and images are aligned to the baseline , if no line-height is given, the baseline is the font-size . 默认情况下，文本和图像与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