0

我已经看到了这个问题的许多变体，但没有找到任何理想的答案。

我想将图像居中放在div.

如果我有一个div正在加载 ajax 内容的内容，我将（使用css, jquery，但是）在正在加载的内容前面放置一个图像div，然后在div完成加载后将其删除。现在，尽管是这种情况，但解决方案不应局限于这种特定情况。希望我（和其他任何人）只要他们需要在div.

这就是重点。我不想让整个屏幕变灰并将图像放在窗口的中心，或者放在下面，或者放在一边，或者放在绝对位置。这些东西比较简单。我希望图像 smack-dab 在给定的中间div，无论它div可能发生在哪里。

注意：我更喜欢不需要额外jquery插件的解决方案。我想使用尽可能少的代码来完成工作。

4

1 回答 1

0

使用 CSS 将图像放置在您喜欢的位置。如果图像永远不会改变大小，这可以工作：

.mydiv {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -#px (where # is half the width of the image);
    margin-top: -#px (where # is half the width of the image);
}

然后做这样的事情来检测页面何时加载并隐藏 div。如果你愿意，你也可以使用 .remove() 。

$(window).load(function() {
        $(".mydiv").hide();
});

要定位特定项目并检测它是否已加载，请执行 $(".mydiv").load(function() {});

应该注意的是，还有许多其他方法可以使图像在 div 中间居中。您可以width: 100%; height: 100%;使用position: absolute;然后z-index: 1;将图像作为background: url('myimage.png') no-repeat scroll center center transparent;.

您也可以使用 :before 或 :after 伪元素来做到这一点，这样您甚至不需要向 HTML 添加任何内容。

您还可以在 div 的底部设置和标记，然后将图像设置为display: block;andmargin: auto auto;等。

于 2013-07-24T23:59:00.073 回答