Question

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

Answer 1

你似乎得到了XY problem。您有一个要解决的任务，而不是向我们询问有关任务的问题，而是询问您尝试过的解决方案，并且已经发现不合适。

为什么要将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

UPD 2013-04-16

我刚刚意识到这是假的。

在CSS中，顶部和底部边距的百分比是指容器的宽度。所以上面的例子只能起作用，因为容器是方形的。

Answer 2

我找到了一个很好的方法。它正在使用transform: translate(-50%, -50%)

这里有一个详细说明解决方案的链接：Centering element

Answer 3

试试这个：

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

.yourElement {
    @include flexible-top(yourElementHeight); 
}

Answer 4

不使用绝对位置的替代解决方案：
就我而言，我不能使用绝对位置，因为它弄乱了使用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;
}

我可以使用SASS \ Compass计算和使用元素高度

4 个答案:

UPD 2013-04-16