如何在具有溢出隱藏的div中垂直對齊文本？

Question

我在ASP中有一個gridView，它將生成一個表。 由於我只需要在TD周圍顯示固定數量的行，就決定將div放置在td中，這樣我就可以實現我的目標。

table.XDataGridView td div.inner-table-div {
height: 32px;
padding: 1px;
overflow: hidden;
display: block;
}

.rfTaskExecutionWrapper td {
    min-width: 100px;
    font-size: 12px;
}

我希望第一列在中心垂直對齊，第二列相同。 我也只希望顯示2或3行文字。 為此，盡管似乎我仍然看到第三行的一些文字，但我還是不想限制它的高度。

該解決方案必須能夠在chrome和Internet Explorer 7（在Windows CE上）上運行。

Answer 1

垂直對齊表格單元格的內容可以使用td上的vertical-align: middle來完成。

如果要確保第二個列中僅可見兩行，請使用line-height。 div的高度為32像素。 您的頂部和底部的填充為1像素，因此剩下30像素。 （假設您使用的是標准框大小），這意味着如果您在div中添加line-height: 15px ，則只會看到兩行，而沒有尾隨的第三行。