垂直對齊：中間表細胞

我的標記是：垂直對齊：中間表細胞

li 
    .wrapper 
    p = @album_count 
    h3 Albums

以上是修身

我的風格是：

li 
    +span-columns(3, 12) 
    +nth-omega(4) 
    position: relative 
    color: $body-text 

    h3 
    text-transform: uppercase 
    text-align: center 

    .wrapper 
    position: relative 
    display: table 
    display: block 
    width: 100% 
    height: 0 
    padding-bottom: 94.6% 
    +border-radius(50%) 
    border: 6px solid $white 
    border: remCalc(6px) solid $white 
    text-align: center 
    background-color: #266997 
    +box-shadow(inset 3px 3px 3px #0B5486) 
    +box-shadow(inset remCalc(3px) remCalc(3px) remCalc(3px) #0B5486) 

    &:after 
     content: '' 
     position: absolute 
     left: 10% 
     top: 10% 
     width: 80% 
     height: 80% 
     +border-radius(50%) 
     background-color: white 
     +box-shadow(3px 3px 3px #0B5486) 
     +box-shadow(remCalc(3px) remCalc(3px) remCalc(3px) #0B5486) 

    p 
     position: absolute 
     display: table-cell 
     width: 100% 
     height: 100% 
     vertical-align: middle 
     z-index: 10

基本上，我結束了與.wrapper是一個特定的寬度，因爲它坐在Compass Susy列中，並且由於94％的底部填充，高度變得相同。由於下面的h3，它有94％。這是我會改變的，但這不是問題。

我遇到的問題是p，我已絕對定位它，並將其高度和寬度設置爲100％，因此它位於圓圈的頂部.wrapper。這工作正常。然後，我將.wrapper顯示爲一個css表格，將p表示爲一個css表格單元格，並添加了vertical-align：middle。就我所知，這應該起作用，但在這種情況下根本沒有任何區別。

有人能幫忙嗎？

來源

2013-05-27 rctneil

不能顯示作爲表格單元的絕對定位的元素：relationships between 'display', 'position', and 'float'（CSS2.1 REC）

編輯：有在.wrapper一個錯字？你有2條指令涉及display，並與IE6/7的兼容性原因我可以理解爲什麼你會首先顯示爲塊爲每個瀏覽器，然後爲IE8 +表格，但在這裏：.wrapper是div（我認爲），它已經阻止默認情況下，它的寫法反過來（表格比塊，所以它是所有人都阻止）

來源

2013-05-27 18:20:56 FelipeAls

垂直對齊：中間表細胞

回答

相關問題