Center Multiple Divs (IE5.5 - 7 only)
It would be nice if we could centre multiple block elements and there is a way to do it but only for IE I'm afraid. This method makes use of the fact that IE understands display:inline-block which as its name suggests is a way to make block level elements line up inline. Unfortunately IE only applies this method to inline elements in the normal course of things , however it has been discovered and noted by Claire at Tanfa that if you apply display:inline and display:inline-block in subsequent style blocks then the block element does indeed behave as an inline block.
Code:
#mainwrap ul li {
display:inline-block;
padding:5px;
margin:5px;
}
#mainwrap ul li{display:inline;}
View Source for the full code
The first example below centers different width images and their captions. In order to have a reasonable display in other browsers the images have all the same height and are floated across the page although I have used some trickery to get a little bit of centering to apply.
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
If you are only interested in IE browsers then we can take this a step further and have different height images also. As you may know, if you have floated images that wrap then they need to fully clear any previous images or they snag on the highest image they meet. This is avoided with display:inline-block because the images are not floated and move to the beginning of the line when they wrap. If you look at the demo below in a browser like firefox you will see that the display is all over the place which is why I don't recommend using this method unless your audience is IE only.
Block level elements of varying height.
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Note:Only works in IE5.5, IE6 and IE7 (doesn't work in ie5)