使用SASS计算上边距

Question

我需要从包含固定大小的图像的div中动态计算上边距的值。图像的高度是可变的。

这是HTML：

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

CSS：

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

应该通过从div的高度中扣除图像的高度来计算

margin-top。

是否可以使用SASS？

Answer 1

如果您尝试将图片定位到div的中心，您不需要 margin-top ：vertical-align它是您的解决方案！< / p>

我为你做了一个例子：

<强> 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。