Vertical middle alignment of image within div? [duplicate]

问题

Possible Duplicate:
vertical alignment of image inside a div

OK, this what I'm trying to do :

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.

I've managed to :

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

What is left :

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...)

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

回答1:

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

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

_{the HTML}

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

_{the 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;
}

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

回答2:

Don't forget that table-cell is not the correct usage. You don't want images to be trated as table cells, since table cells should only contain table data. Just raising a caution flag. Stick to the semantics.

it's better to use the answer from that other thread. This:

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

Good luck!

回答3:

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

回答4:

Add some margin-top to the image style so that it is aligned in the middle of the div. Say your div is 50px height and your image has a height of 5px. Then make your margin-top 20px to put it in the middle.

来源：https://stackoverflow.com/questions/11892373/vertical-middle-alignment-of-image-within-div

标签

javascript

html

css

vertical-alignment