css - Vertical-align: table-cell の中央

Question

私のマークアップは次のとおりです。

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、コンパス Susy カラムが配置されているために特定の幅になり、94% の下部パディングにより高さが同じになります。下のh3が原因で94％です。これは私が変更するものですが、これはここでは問題ではありません。

私が抱えている問題は です。p絶対に配置し、高さと幅をそれぞれ 100% に設定して、円の上に配置しました.wrapper。それはうまくいきます。次に、.wrapper を css テーブルとして表示し、p を css テーブル セルとして表示し、vertical-align: middle を追加しました。これは私が知る限り機能するはずですが、この場合はまったく違いはありません。

誰でも助けることができますか？