3

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

Community
  • 1
  • 1
Dr.Kameleon
  • 22,532
  • 20
  • 115
  • 223

4 Answers4

2

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

tereško
  • 58,060
  • 25
  • 98
  • 150
1

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!

rm-
  • 128
  • 1
  • 1
  • 10
1

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();
});
d4v
  • 113
  • 1
  • 4
0

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.

Deekor
  • 9,144
  • 16
  • 69
  • 121
  • This is what the OP is currently doing, and has mentioned that this would not work in general as the containing `div` could have different dimensions (say, after loading something else first). – Zhihao Aug 09 '12 at 21:59
  • 1
    @zhihao looks like he edited that into the post after i published this answer. – Deekor Aug 09 '12 at 22:03
  • Sorry, but I did not see any indication that the question was edited (not to cast doubt on you). Nonetheless, your answer could have been edited afterwards to fit the updated question. At risk of sounding nit-picky as well, I believe the `margin-top` should also be `22.5px` in your example, given that the image is `5px` in height. – Zhihao Aug 09 '12 at 22:12