我想要做这样的事情:
.my-style {
width: 50px;
margin-left: calc(50% - calc(width / 2));
}
我想把宽度改为90像素,然后希望边距相应地增加。
但这样不起作用。这是否可能实现?
我想要做这样的事情:
.my-style {
width: 50px;
margin-left: calc(50% - calc(width / 2));
}
我想把宽度改为90像素,然后希望边距相应地增加。
但这样不起作用。这是否可能实现?
最新的浏览器应该支持它,我尝试了以下代码。
这是我制作的一个 WebKit 示例,请在 Chrome 中检查
CSS
p {
-webkit-var-a: -webkit-calc(1px + 3px);
margin-left:-webkit-calc(-webkit-var(a) + 5px);
}
HTML
<p>This text should have margin-left, but it doesn't</p>
FIDDLE(JSFiddle)
如果你检查 <p>
元素,你会发现它认为代码是有效的,但它什么也没做……所以目前似乎你必须使用 JavaScript、LESS 或任何等效的东西,因为它仍然是一个实验性功能。
编辑:
当你将变量设置为普通数字时,它确实可以工作:
p {
-webkit-var-a: 3px;
margin-left:-webkit-calc(-webkit-var(a) + 5px);
}
回答您的问题,是的,这是可能的,但我现在不建议使用。
CSS
.my-style {
height:100px;
background-color:black;
-webkit-var-width: 50px;
margin-left: -webkit-calc(50% - -webkit-var(width) / 2);
}
FIDDLE
你无法使用标准CSS做到这样的事情,你应该探索一些替代方案,比如LESS
编辑:我错了,如果你在calc()函数中使用var(),CSS3是支持这个功能的:
.my-style {
width: 50px;
margin-left: calc(50% - (var(width) / 2));
}
我认为应该这样做。
.my-style {
width: 50px;
margin-left: calc(100% - calc(width / 2));
}
试试这样做,对我非常有效。