Question

.v-centered (@height,@width) {
    width: @width;
    height: @height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: (@height / 2)px 0 0 (@width / 2)px;
}

我正在努力制作一个LESS mixin用于垂直居中的东西（非线高的方式） - 而这个LESS mixin无效。我觉得它与我的margin: (@height / 2)px 0 0 (@width / 2)px;行有关但我无法看到我的语法出错了。任何帮助表示赞赏。

Answer 1

这取决于你如何使用它。现在，您的代码假设宽度和高度在没有单位的情况下传递，但您的width和height属性也不会附加像您的margin属性一样的单位。

另外，要正确居中，你要否定你的边缘。

.v-centered (@height, @width) {
    width: @width;
    height: @height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -(@height / 2) 0 0 -(@width / 2);
}

DEMO

为什么这个LESS mixin没有工作？

1 个答案: