css - 垂直对齐 : middle in table-cell

Question

我的标记是:

li
  .wrapper
    p = @album_count
  h3 Albums

上面是Slim

我的风格是:

  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。据我所知，这应该有效，但在这种情况下根本没有任何区别。

有人能帮忙吗？

Answer 1

您不能将绝对定位元素显示为表格单元格:relationships between 'display', 'position', and 'float' (CSS2.1 录制)

编辑:.wrapper 中是否有拼写错误？您有 2 条涉及 display 的说明，出于与 IE6/7 的兼容性原因，我可以理解为什么您首先要为每个浏览器显示为 block ，然后为 IE8+ 显示为表，但这里:.wrapper 是一个 div(我认为)，默认情况下它已经是 block ，并且它是相反的写法(表而不是 block ，所以它对每个人都是 block )