div内图像的垂直中间对齐？ [复制]

Posted 2023-03-05

【中文标题】div内图像的垂直中间对齐？ [复制]

【英文标题】：Vertical middle alignment of image within div? [duplicate]

【发布时间】：2012-08-07 04:58:30

【问题描述】：

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

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

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

“ajax loading”

旋转gif。

我已经做到了：

将img 水平居中（通过将其放在另一个div 和text-align:center; 中）

剩下的：

能够给那个空的 div 一些高度。 （简单） 垂直对齐图像，使其显示在

框的正中心

。 （我完全不知道该怎么做。我目前正在设置一个上边距，它适用于一个特定的盒子，但如果盒子已经有一些不同的高度，这将不起作用......）

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

【参考方案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;。

【讨论】：

非常感谢；这可能就是我要这样做的方式。

【参考方案2】：

不要忘记 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 */

祝你好运！

【参考方案3】：

使用 jQuery

//html
<div><img src="loader.gif" class="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();
);

【参考方案4】：

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

【讨论】：

这是 OP 当前正在做的事情，并提到这通常不起作用，因为包含 div 可能有不同的尺寸（例如，在先加载其他内容之后）。

@zhihao 在我发布此答案后，他似乎将其编辑到帖子中。

抱歉，我没有看到任何迹象表明该问题已被编辑（不是对您产生怀疑）。尽管如此，您的答案可能会在之后进行编辑以适应更新的问题。考虑到图像的高度为5px，我认为margin-top 在您的示例中也应该是22.5px。