Question

我有<li>，其宽度受限制，高度设置为1：1的宽高比。

然后我有一个元素，里面绝对有100％的宽度和高度。然后我将一个图标字体添加到：before伪元素。如何将该伪元素垂直居中？

我的代码是：

li
  +span-columns(1, 6)

  a
    +border-radius(50%)
    display: block
    position: relative
    width: 100%
    border: 5px solid $bright-blue
    border: remCalc(5px) solid $bright-blue

    &:before
      padding-top: 100%
      content: ''
      display: block

    span
      display: block
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%

      &:before
        // Content is added via the style for data-icon
        display: inline-block
        min-height: 100%
        vertical-align: middle
        width: 100%
        color: $white
        font-size: 32px
        text-align: center
        outline: 1px solid red

问题的图片。红色轮廓在跨度上：

之前

Pic of issue

编译输出：

li {
  width: 150px;
}

li  a {
  border-radius: 50%;
  display: block;
  position: relative;
  width: 100%;
  border: 5px solid blue;
}

li a:before {
  padding-top: 100%;
  content: '';
  display: block;
}

li a span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

li a span:before {
  content: attr(data-icon);
  font-family: 'IconFont';
  display: inline-block;
  min-height: 100%;
  vertical-align: middle;
  width: 100%;
  color: white;
  font-size: 32px;
  text-align: center;
  outline: 1px solid red;
}

Answer 1

我为你创造了一个解决方案。

此处： http://jsfiddle.net/avrahamcool/h3e2G/

在我的小提琴中，您的范围被称为Content，我添加了一个名为Centerer的新范围。另外，我在布局中集中了一些文字，但您可以将其更改回您的徽标，而不会注意到任何差异。

主要理念是：

修复height的{{1}}（您已经修复了li，如果它应该是一个圆圈，我也没有看到修复高度的问题）
失去width和relative方式
而不是将文本居中在跨度内（跨度为ablsolute），我们将跨度集中在他的持有者中。

Answer 2

不得不用这样的顶部填充来解决这个问题：

$half-width: space(1, 6) / 2
$half-font: remCalc(33px) / 2
$border-widths: remCalc(5px)
+rem(padding-top, $half-width - $half-font - $border-widths)

根据当时圆的宽度，我可以在rems中自定义顶部填充，并且当正文字体大小增加或减少时，它会完美缩放。

在元素内垂直居中

2 个答案: