表格單元中的垂直對齊以及浮動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