垂直对齐:在表格单元格中间

Question

我的标记是:

li
  .wrapper
    p = @album_count
  h3 Albums

以上是在Slim

我的style是:

  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%的底部填充。94%是因为下面的h3。这是我要改变的东西，但这不是这里的问题。

我遇到的问题是p，我已经绝对定位它，并将它的高度和宽度设置为100%，所以它位于圆圈.wrapper的顶部。这很好。然后，我将.wrapper显示为css表，p显示为css表单元格，并添加了vertical-align: middle。据我所知，这应该可以工作，但在这种情况下，它根本没有任何区别。

有人能帮忙吗?

Answer 1

绝对定位元素不能显示为表格单元格:'display'， 'position'和'float'之间的关系(CSS2.1 REC)

编辑:.wrapper有错别字吗?你有两个指令涉及到display出于与IE6/7的兼容性原因我可以理解为什么你首先在每个浏览器中显示为块然后在IE8+中显示为表但这里:.wrapper是div(我想)它已经默认为块了它是反过来写的(表而不是块所以每个人都是块)