Question

可能重复：
vertical alignment of image inside a div

好的，这就是我要做的事情：

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

我设法：

水平居中img（将div放入另一个text-align:center;）

剩下的内容：

能够为那个空div提供一些高度。 （容易）
垂直对齐图像，使其在框的正中央显示。 （我完全不知道怎么做。我正在设置一个上边距，适用于一个特定的盒子，但是如果盒子已经有一些不同的高度则无法工作......）

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

Answer 1

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;}。

Answer 2

不要忘记表格单元格不正确。您不希望将图像作为表格单元格进行处理，因为表格单元格应仅包含表格数据。只是提出警告标志。坚持语义。

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

#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 */
}

祝你好运！

Answer 3

使用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();
});

Answer 4

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

div中图像的垂直中间对齐？

4 个答案: