CSS中的表格是網頁中常見的展示數據的方式,但當表格中的內容長度不同或者表格中有大量的空白時,表格就不夠美觀。垂直居中是一個簡單的方法,可以使表格看起來更加整齊、美觀。在CSS中,有幾種方法可以設置表格中的內容垂直居中。
方法一:使用line-height
td { height: 50px; line-height: 50px; }
將td的高度設置為固定值,然后將行高設置為相同的值就可以將內容垂直居中。但是如果內容的高度超過了50px,則會超出td的范圍。
方法二:使用display和table-cell屬性
td { display: table-cell; vertical-align: middle; }
將td的display屬性設置為table-cell,然后設置垂直居中的屬性為vertical-align:middle。這種方法支持內容高度不確定的情況,但ie6及以下版本的瀏覽器無法支持display為table-cell的屬性。
方法三:使用transform屬性
td { position: relative; } td span { position: absolute; top: 50%; transform: translateY(-50%); }
將td的position設置為relative,然后將span的position屬性設置為absolute,并設置top為50%,transform屬性為translateY(-50%)來實現垂直居中。這種方法也支持內容高度不確定的情況。
以上是三種設置表格中內容垂直居中的方法,可以根據實際需求選擇其中一種進行使用。