1

我的标记是：

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

基本上，由于它所在的 Compass Susy 列，我最终.wrapper得到了一个特定的宽度，并且由于 94% 的底部填充，高度变得相同。由于下面的 h3，它是 94%。这是我将要改变的东西，但这不是这里的问题。

我遇到的问题是p，我已经绝对定位它并将它的高度和宽度设置为 100%，因此它位于圆的顶部.wrapper。这很好用。然后，我将 .wrapper 显示为 css 表格，将 p 显示为 css 表格单元格，并添加了垂直对齐：中间。据我所知，这应该有效，但在这种情况下根本没有任何区别。

有人能帮忙吗？

4

1 回答 1

1

您不能将绝对定位的元素显示为表格单元格：“显示”、“位置”和“浮动”之间的关系(CSS2.1 REC)

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

于 2013-05-27T18:20:56.230 回答