javascript - div内图像的垂直中间对齐？

Question

可能重复：
div内图像的垂直对齐

好的，这就是我想要做的：

我有一个空的 div（一个盒子），几乎没有高度。
我正在发出 AJAX 请求以将一些内容加载到其中。
在加载内容之前，我想以典型的“ajax 加载”旋转 gif 显示。

我设法：

水平居中img（通过把它放在另一个div里面text-align:center;）

剩下什么：

能够给那个空的 div 一些高度。（简单的）
垂直对齐图像，使其出现在框的正中心。（我完全不知道该怎么做。我目前正在设置一个上边距，它适用于一个特定的盒子，但如果盒子已经有一些不同的高度，这将不起作用......）

你会怎么做？（任何可能的想法都是可以接受的。CSS/Javascript 等等……）

score 2 · Accepted Answer

http://jsfiddle.net/teresko/5mG2y/

基本思想是使用display: table-cell;然后vertical-align: middle;

_{HTML _}

<div class="container">
    <div class="holder">
        <img class="stuff" src="path/to/image.png">
    </div>                
</div>

_的CSS：

.container{ 
    /* the container in which image is placed */
    height:         300px;
    margin:         0 auto;
    width:          200px;
}

.holder{
    display:        table-cell;
    width:          100%;
    vertical-align: middle;
    height:         inherit;
}

.stuff{
    display:        block;
}

这样图像的放置将不依赖于容器的尺寸。它也可以调整到水平中心。您所要做的就是添加.stuff{ margin: 0 auto;}.

score 1 · Accepted Answer

不要忘记 table-cell 不是正确的用法。您不希望将图像视为表格单元格，因为表格单元格应该只包含表格数据。只是举起谨慎的旗帜。坚持语义。

最好使用其他线程的答案。这个：

#container { position: relative; }
#container img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: /* -1/2 the height of the image */
  margin-left: /* -1/2 the width of the image */
}

祝你好运！

score 1 · Accepted Answer

使用 jQuery

//HTML
<div><img src="loader.gif" class="loader" alt="Loader" /></div>

//JS
$.fn.centeringIn = function(){
 var pere = this.parent();
 (pere.css("position") == 'static') ? pere.css("position","relative"):pere.css("position");
 this.css({
  'position' : 'absolute',
  'top' : ( pere.height() - this.height() )/2+'px',
  'left' : ( pere.width() - this.width() )/2+'px'
 });
}

$(document).ready( function() {
 $('.loader').centeringIn();
});

score 0 · Accepted Answer

为图像样式添加一些 margin-top ，使其在 div 的中间对齐。假设您的 div 高度为 50px，而您的图像高度为 5px。然后让你的 margin-top 20px 放在中间。

javascript - div内图像的垂直中间对齐？

4 回答 4

Related

Reference