垂直对齐：表格单元格的中间答案

【问题标题】：Vertical-align: middle in table-cell垂直对齐：表格单元格的中间
【发布时间】：2013-05-28 02:20:56
【问题描述】：

我的标记是：

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 表格单元格，并添加了垂直对齐：中间。据我所知，这应该有效，但在这种情况下根本没有任何区别。

有人可以帮忙吗？

【问题讨论】：

标签： css positioning css-tables

【解决方案1】：

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

编辑：.wrapper 中有错字吗？您有 2 条涉及 display 的说明，出于与 IE6/7 的兼容性原因，我可以理解为什么您首先将每个浏览器显示为块，然后将 IE8+ 显示为表格，但在这里：.wrapper 是 div（我认为) 并且默认情况下它已经是阻塞的，并且它是以相反的方式编写的（表而不是阻塞，所以它对每个人都是阻塞的）

【讨论】：