1

我在我的网站上显示用户上传的图像预览，但我希望能够在 div 中垂直居中。我试图通过在margin-top完成上传后使用 Javascript 设置图像来做到这一点，如下所示（有$img问题的图像在哪里）：

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

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

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

有没有公​​认的处理方式？.height()除了每隔一段时间调用它直到它大于零之外，有没有办法知道什么时候可以使用它的值？谢谢！

4

1 回答 1

2

您应该能够通过 Michał Czernow 的“幽灵元素”CSS 垂直居中技术（CSS 技巧：未知中的居中）的变体来解决零高度问题。这将不需要对图像进行 javascript 操作。

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

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

该“幽灵”元素本质上成为您图像的脚手架，使用图像样式设置图像，vertical-align: middle;并且无论何时更新图像，它都应该可以正常工作。

这是一个jsfiddle展示了它是如何工作的。

于 2012-06-26T16:05:33.987 回答