在元素内垂直居中答案

【问题标题】：Vertically Centering within an element在元素内垂直居中
【发布时间】：2013-08-30 18:19:23
【问题描述】：

我有一个<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

问题的图片。红色轮廓在 span:before 上

编译输出：

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;
}

【问题讨论】：

由于您的问题是关于 CSS（而不是关于让 Sass 生成您需要的 CSS），因此提供编译后的 CSS（和演示！）会更有用。
我目前无法直接获得编译后的输出，但转换非常容易。现在将为您更新 OP。很遗憾，暂时无法提供演示。
为您添加了编译输出。问题基本上是如何垂直对齐容器内的文本（图标字体文本字符串）。
您尝试过 any vertical alignment 技术吗？
是的，但没有一个行得通。

标签： css sass vertical-alignment pseudo-element

【解决方案1】：

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

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

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

主要思想是：

修复li的height（你已经修复了width，如果它应该是一个圆圈，我看不出还有固定高度的问题）。
失去relative 和ablsolute 方式
我们不是在 span 中将文本居中（而 span 是 height:100%），而是在他的持有人中居中。

【讨论】：

我很欣赏小提琴。不幸的是，我无法修复圆圈的高度，因为我正在使用这个技巧来获得完美的 1:1 宽度：高度比圆圈：codepen.io/Kseso/pen/bfdhg 圆圈的宽度基于我的 Susy 网格的 2 列，可以根据媒体进行更改查询。所以它非常灵活。反正就是这样。
为你的 li 生成宽度的代码不能生成相同的高度？（如您所见，您的固定宽度为 150px）
该宽度实际上应该是 Compass Susy 设置的百分比，我的错误是将 Sass 手动转录为 CSS。因此无法生成相同的高度。

【解决方案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 为单位的自定义顶部填充，并且当正文字体大小增加或减少时它可以完美缩放。

【讨论】：