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 REC）

编辑：.wrapper中是否有拼写错误？您有2条涉及display的说明，出于与IE6 / 7的兼容性原因，我可以理解为什么您首先将每个浏览器显示为块，然后将IE8 +显示为表格，但这里：.wrapper是{{ 1}}（我认为）并且默认情况下它已经被阻止了，而且它是以相反的方式编写的（表格不是块，因此它适用于每个人）

垂直对齐：表格单元格中间

1 个答案: