Question

我在我的网站上显示用户上传的图片预览，但我希望能够在div中垂直居中。我尝试按照以下方式设置图片margin-top并使用Javascript完成上传后尝试这样做（其中$img是相关图片）：

reader.onloadend = (function() {
    var $parentDiv = $img.parent();
    $img.css('margin-top', ($parentDiv.height() - $img.height()) / 2);
});

我读过的FileReader documentation让我相信一旦文件上传完成就会调用onloadend，这似乎就是这种情况。但是，无论图片的大小如何，$img.height()在调用0时都会返回onloadend。

这似乎是因为这个价值尚不可用。如果我上传第二张图片（清除现有图片预览），然后重新上传第一张图片，则该功能有效; $img.height()返回正确的值。之后通过控制台调用它也会正确返回。

是否有可接受的处理方法？是否有任何方法可以知道.height()的值何时可以使用，而不是每隔一段时间调用它，直到它大于零为止？谢谢！

Answer 1

你应该能够通过MichałCzernow的'鬼元素'CSS垂直居中技术（CSS Tricks: Centering in the Unknown）的变化解决零高度问题。这将不需要对图像进行javascript操作。

使用CSS将伪元素添加到容器div：

.container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

'ghost'元素基本上成为您图像的支架，使用vertical-align: middle;为图像设置样式，每当您更新图像时它都应该正常工作。

这是jsfiddle，显示了这可能有用。

垂直居中上传的图像预览

1 个答案: