使用SASS的Calaculate顶部边距

我需要从包含固定大小的图像的div动态计算顶部边距的值。图像的高度是可变的。使用SASS的Calaculate顶部边距

下面是HTML：

<div> 
<img src="path for image" /> 
</div>

而CSS：

div {width:300px; height:300px;} 
img {margin-top: ??????}

margin-top应该由div的高度扣除图像的高度来计算..

是否有可能通过使用SASS？

来源

2014-01-29 Digesh

可以使用** ** CSS [计算值（）函数（https://developer.mozilla.org/en-US/docs/Web/CSS/calc） - '边距：计算值（100％ - 300像素）' – Vucko

我不认为你可以用SASS做到这一点，这里是使用可能的解决方案的小型工作代码的jQuery http://jsfiddle.net/GZyZk/ – lazyprogrammer

你确定你需要计算保证金-top或者你只是试图将图像放在div的底部？ – chaenu

如果你想将图像定位到div的中心，你不需要边距：垂直对齐这是您的解决方案！

我做了一个例子给你：

HTML：

<div class="battleground"> 
    <img src="http://i.imgur.com/1hQn32D.jpg" alt="Titanfall Image" /> 
</div>

CSS：

.battleground { 
    background-color: purple; 
    width: 600px; 
    height: 300px; 
    line-height: 300px; 
    text-align: center; 
} 

.battleground img { 
    vertical-align: middle; 
}

如果你愿意的话，you can play here。

来源

2014-01-30 11:20:49

使用SASS的Calaculate顶部边距

回答

相关问题