對齊HTML表格單元中的數據在中間

Screenshot of table row 對齊HTML表格單元中的數據在中間

（具有一個表和按鈕）在此，在第二列我有一個表（根據數據動態創建的）和一個具有跨度的CSS特性 -

span.addPeriod { 
width: 80px; 
height: 15px; 
float: right; 
background-color: #A6A6A6; 
cursor: pointer; 
text-align: center; 
border-radius: 5px; 
vertical-align: middle; } 

span.addPeriod:hover { 
background-color: #507BAF; } 

span.addPeriod a { 
text-decoration: none; 
font-size: 12px; 
font-weight: bold; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
color: #FFF;}

我正在嘗試將單元格（垂直）中心的span「Add Period」對齊爲Test，Xyzz。請幫忙。

來源

2014-01-22 Niks

span默認情況下沒有垂直對齊。將它用於td而不是跨度。或者使用display：table來進行一些破解 – Justinas

嘗試將第二列單元的垂直對齊設置爲中間。

來源

2014-01-22 07:36:20 netX

使用當前的CSS，vertical-align不會影響任何內容，因爲span的高度僅爲15px。

你可以做到以下幾點：

設置跨度高度（的行高）×100％。垂直對齊只在高度與行高相同時纔有用。目前您的身高設置爲15px，因此內部鏈接仍會顯示在單元格的頂部。
使用絕對定位來定位小區內的跨度

位置：絕對; top：50％; margin-top：-7px;

希望這有助於！

來源

2014-01-22 07:42:04 Yani

對齊HTML表格單元中的數據在中間

回答

相關問題