在網頁排版中,讓兩行字垂直居中是一個常見的需求。在 CSS 中,我們可以使用以下幾種方法實現。
方法一: 通過設置行高(line-height)來讓文字垂直居中。 代碼如下: p{ height: 100px; line-height: 100px; } 方法二: 使用 flex 布局。將 p 標簽的父容器設置為 display: flex,并設置 align-items: center 屬性。 代碼如下: .container{ display: flex; align-items: center; height: 200px; /*設置父容器高度*/ } p{ margin: 0; /*去除 p 標簽默認的上下邊距*/ } 方法三: 使用 table 布局。將 p 標簽的父容器設置為 display: table,并將其內部元素的 vertical-align 屬性設置為 middle。 代碼如下: .container{ display: table; height: 200px; /*設置父容器高度*/ } p{ display: table-cell; margin: 0; /*去除 p 標簽默認的上下邊距*/ vertical-align: middle; } 無論采用哪種方法,都能有效地讓兩行字垂直居中。