如何垂直對齊div內的文字？

中文字的垂直對齊

在 Web 開發中，通常需要在

中垂直對齊文字。分區>元素。要實現此目的，有多種解決方案可用。

使用 Line-Height：

一個簡單的方法是使用 line-height 屬性。透過將 line-height 設定為與

的高度相同的值，文字將自動居中垂直對齊。

範例：

#abc {
  line-height: 50px;
}

注意：此方法僅在文字內只有一行文字時有效

使用Display: Table 和Display: Table-Cell:

對於多行文本，更通用的解決方案包括使用 display: table並顯示：表格單元格屬性。此方法涉及將文字包裝在 內。並設定顯示：表格單元格和垂直對齊：中間。

範例：

#abc {
  display: table;
}

#abc span {
  display: table-cell;
  vertical-align: middle;
}

使用Transform 屬性：

另一個選擇是將transform屬性與translateY( )函數一起使用。這涉及將元素的位置設為絕對位置，將其定位為距頂部 50%，並將其從其軸平移 -50%。

範例：

#abc {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

注意：

此方法可能不被IE8等舊版瀏覽器支援。

以上是如何垂直對齊div內的文字？的詳細內容。更多資訊請關注PHP中文網其他相關文章！