在網(wǎng)頁(yè)設(shè)計(jì)中，我們常常需要設(shè)置表格中的文字垂直居中，也就是讓文字在單元格的中間位置。在 CSS 中，我們可以通過(guò)設(shè)置行高(line-height)來(lái)實(shí)現(xiàn)這個(gè)效果。 首先，我們來(lái)看一個(gè)簡(jiǎn)單的表格示例：

<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>

默認(rèn)情況下，表格中的文字是垂直居中的。但是，如果我們想讓表格中的文字在水平和垂直方向上都居中，可以這樣來(lái)設(shè)置：

table {
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}

上述代碼中，text-align 屬性用于設(shè)置水平居中，而 vertical-align 屬性用于設(shè)置垂直居中。 但是，如果我們只想讓其中一個(gè)單元格中的文字垂直居中，另一個(gè)單元格中的文字靠頂部對(duì)齊，應(yīng)該怎么做呢？這時(shí)，我們需要分別為兩個(gè)單元格設(shè)置不同的行高：

td {
height: 30px; /* 設(shè)置單元格高度 */
line-height: 30px; /* 設(shè)置行高等于單元格高度 */
}
/* 僅僅對(duì)第一個(gè)單元格設(shè)置文字垂直居中 */
td:first-child {
vertical-align: middle;
}

上面代碼中，我們先為所有的 td 元素設(shè)置了相同的高度和行高，然后通過(guò):first-child 偽類，只為第一個(gè)單元格設(shè)置垂直居中。 總結(jié)：通過(guò)設(shè)置行高，我們可以很方便地實(shí)現(xiàn)表格中文字的垂直居中。需要注意的是，如果我們只想讓其中一個(gè)單元格中的文字垂直居中，需要為這個(gè)單元格設(shè)置不同的 line-height 值。