css - 在元素内垂直居中

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

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

编译输出：

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

必须像这样使用顶部填充来解决这个问题：

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

这给了我自定义的顶部填充，具体取决于当时圆圈的宽度，并且当正文字体大小增加或减少时它可以完美缩放。

Answer 2

我已经为您创建了一个解决方案。

这里：http: //jsfiddle.net/avrahamcool/h3e2G/

我的小提琴中调用了您的跨度Content，并且我添加了一个名为Centerer. 此外，我在布局中将一些文本居中，但您可以将其更改回您的徽标，而不会注意到任何差异。

主要思想是：

1. 修复height（li你已经修复了width，如果它应该是一个圆圈，我看不出还有固定高度的问题）。

2. 迷失方向relative_ablsolute

3. 我们不是在 span 内居中文本（而 span 是height:100%），而是在他的持有人内居中 span。