2013-08-16 46 views
1
.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不起作用。我有一种感觉,它与我的margin: (@height/2)px 0 0 (@width/2)px;线有关,但我不明白我的语法错在哪里。任何帮助赞赏。为什么不是这个LESS mixin工作?

回答

2

这取决于你如何使用它。现在你的代码假设宽度和高度都是在没有单位的情况下传递的,但你的widthheight属性不会附加一个单位,比如你的margin属性。

此外,要正确居中您要否定您的利润率。

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

DEMO

用你的方法有
+0

所以,这将工作? '.v-centered(200px,500px);' –

+0

[是](http://codepen.io/anon/pen/LoqBr)。 –