11

我在我的 RoR 项目中使用 sass 和 compass。我需要为top元素的 CSS 属性分配值，即元素高度除以 -2。我可以用 SASS \ Compass 做吗？

4

4 回答 4

22

您似乎遇到了XY 问题。您有一项任务要解决，而不是向我们询问该任务，而是询问您尝试过但已经发现不合适的解决方案。

为什么要应用top等于元素高度一半的属性并取反？因为您想将绝对定位的元素向上移动一半高度。这是最初的任务。

有一个简单的解决方案可以实现这一点，甚至不需要 SASS！（实际上，只要不知道元素的高度，SASS 就无法提供比 CSS 更多的帮助。）

我们需要一个额外的包装器： 

<div class=container>
  <div class=elements-wrapper>
    <div class=element>
    </div>
  </div>
</div>

要将元素向上推至其高度的 50%，请执行两个简单的步骤：

1) 将其包装纸完全推出容器： 

.elements-wrapper {
  position: absolute;
  bottom: 100%; }

2) 现在将元素向下拉到其高度的 50%：

.element {
  margin-bottom: -50%; }

就是这样！

当你这样做时margin-bottom: -50%，你实际上将元素拉低了其包装高度的 50%。但是包装器的高度等于元素的高度！

不要忘记应用position: relative到容器上，否则position: absolute会相对于窗口，而不是容器。

这是一个带有良好注释代码的演示：http: //jsbin.com/uwunal/4/edit

更新 2013-04-16

我刚刚意识到这是一个骗局。

在 CSS 中，上边距和下边距的百分比是指容器的宽度。所以上面的例子只适用于容器是方形的。

于 2013-03-30T10:20:42.423 回答
4

我找到了这样做的好方法。它正在使用transform: translate(-50%, -50%)

这里有一个详细说明解决方案的链接：居中元素

于 2013-12-06T15:41:47.427 回答
3

试试这个：

@mixin flexible-top($elementHeight) {
    top: ($elementHeight / (-2));
}

.yourElement {
    @include flexible-top(yourElementHeight); 
}
于 2013-03-30T06:44:52.087 回答
0

不使用绝对位置的替代解决方案：
在我的情况下，我不能使用绝对位置，因为它会弄乱使用 display flex 的子元素。我能够做的是让我的包装器在我想要垂直居中的空间中具有 100% 的高度。注意：我的子元素已经水平居中。

前提条件：
为了使此解决方案起作用，包装器在您要垂直居中的空间中必须具有 100% 的高度。例如，我希望它相对于窗口高度垂直居中，因此包装器必须与窗口高度相同。

结构：

<div class="elements-wrapper">
  <div class="element"> <!-- in my case, this is a container -->
    <!-- in my case, x numbers of display flex elements here-->
  </div>
</div>

包装器高度为 100%，向下平移 50%。

.elements-wrapper {
  height: 100%;
  transform: translate(0, 50%);
}

然后，将元素向上平移 50%。

.element {
  transform: translate(0, -50%);
}

有了这个，元素可以是任意大小，你不必每次都弄乱 CSS，比如在我的例子中，通过添加子元素来改变大小。

*有一个问题，我的元素包装器阻止了向下移动的 50% 中的指针事件，所以我通过添加这些规则来解决这个问题：

.elements-wrapper {
  pointer-events: none;
}
.element{
  pointer-events: initial;
}
于 2019-10-30T10:03:23.660 回答