图像在div中的垂直中间对齐？ [英] Vertical middle alignment of image within div?

问题描述

可能重复：

在div内的图像垂直对齐

好，这是我想要做的：

• 我有一个空的div


• 在加载内容之前，我将一个AJAX请求加载到其中。希望以典型的ajax loading显示。

• I'm having an empty div (a box), with almost no height.
• I'm making an AJAX request to load some content into it.
• Before loading the content, I want to display in a typical "ajax loading" rotating gif.

到：

• 水平放置 img 另一个 div 与 text-align：center; ）

• Center the img horizontally (by putting it inside another div with text-align:center;)

剩下的是什么：

• 空div。 （easy）


• 垂直对齐图片，使其在正上方的 （我完全不知道该怎么做，我目前设置的上边距，它适用于一个特定的盒子，但如果该盒子已经有一些不同的高度，这将无法工作...）

• Be able to give some height to that empty div. (easy)
• Vertically align the image, so that it appears on the very center of the box. (I've got absolutely no idea how to do this. I'm currently setting an upper margin, which works for one particular box, but which wouldn't work if the box already has some different height...)

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

How would you go about it?? (Any possible idea is acceptable. CSS/Javascript whatever...)

推荐答案

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

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

The basic idea is the use display: table-cell; and then vertical-align: middle;

_HTML

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

_{CSS / sub>}

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

This way the placement of image will not depend on dimensions of container. It also can be adjusted to be in horizontal center too. All you have to do is to add .stuff{ margin: 0 auto;}.

这篇关于图像在div中的垂直中间对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！