Vertical-align: middle in table-cell

Question

My markup is:

li
  .wrapper
    p = @album_count
  h3 Albums

The above is in Slim

My styles are:

  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

Basically, I end up with the .wrapper being a specific width due the Compass Susy column it is sat in and the height becomes the same due to the 94% bottom padding. It's 94% due to the h3 underneath. This is something I will be changing but this isn't the issue here.

The problem I have is with the p , I have absolutely positioned it and set it's height and width to be 100% each so it sits on top of the circle .wrapper . That works fine. I then displays the .wrapper as a css table and the p as a css table cell and added vertical-align: middle. This should work as far as I am aware but it is not making any difference at all in this case.

Is anyone able to help?

Answer 1

You can't display as table-cell an absolutely positioned element: relationships between 'display', 'position', and 'float' (CSS2.1 REC)

EDIT: is there a typo in .wrapper ? You've 2 instructions involving display and for compatibility reasons with IE6/7 I can understand why you would first display as block for every browser and then for IE8+ as table but here: .wrapper is a div (I think) and it's already block by default and it's written the other way around (table than block so it's block for everybody)