如何在CSS表格中垂直對齊？

一、使用vertical-align屬性

vertical-align屬性是CSS表格中用來控制垂直對齊的重要屬性，它可以用於所有表格單元格元素，包括

和

。vertical-align屬性有以下幾個可選值：

• baseline：基線對齊，是單元格默認的對齊方式。
• top：頂部對齊，將單元格的頂部與最高單元格的頂部對齊。
• bottom：底部對齊，將單元格的底部與最低單元格的底部對齊。
• middle：垂直居中對齊，將單元格垂直居中對齊。
• text-top：文字頂部對齊，將單元格文本的頂部與最高單元格的頂部對齊。
• text-bottom：文字底部對齊，將單元格文本的底部與最低單元格的底部對齊。

例如，以下代碼可以將單元格垂直居中對齊：

table {
  border-collapse: collapse;
}

td {
  vertical-align: middle;
}

二、使用line-height屬性

line-height屬性可以使文本在行高內垂直居中，因此也可以用在表格單元格中實現垂直對齊。將單元格的line-height屬性值設為與單元格高度相等，即可實現垂直居中對齊。例如：

table {
  border-collapse: collapse;
}

td {
  height: 100px;
  line-height: 100px;
}

三、使用Flexbox布局

使用Flexbox布局也可以實現CSS表格中的垂直對齊。Flexbox可以實現更為靈活的布局及對齊方式。以下代碼可以將表格的所有單元格都垂直居中對齊：

table {
  border-collapse: collapse;
  display: flex;
  flex-direction: column;
}

tr {
  display: flex;
}

td {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

四、使用Grid布局

使用Grid布局也可以實現CSS表格中的垂直對齊。Grid可以用於更為複雜的網格布局，包括在表格中垂直對齊。以下代碼可以將表格的所有單元格都垂直居中對齊：

table {
  border-collapse: collapse;
  display: grid;
}

td {
  display: flex;
  align-items: center;
  justify-content: center;
}

五、使用偽元素

使用偽元素也可以實現CSS表格中的垂直對齊。偽元素可以在單元格中創建一個假的元素，然後通過設置該元素的位置來控制單元格內容的對齊。以下代碼可以將單元格垂直居中對齊：

table {
  border-collapse: collapse;
  position: relative;
}

td {
  position: relative;
}

td::before {
  content: "";
  display: block;
  height: 50%;
  margin-top: -0.5em;
}

小結

以上是五種實現CSS表格中垂直對齊的方法。可以根據具體情況選擇適合的方法實現。其中，使用vertical-align屬性最為常用，而Flexbox和Grid布局則比較靈活，適用於更為複雜的布局。使用偽元素的方式則比較巧妙，但需要較高的CSS技巧。