Center Multiple Divs (IE5.5 - 8 + other modern browsers)
It would be nice if we could centre multiple block elements and there is a way to do it but requires a hack for IE7 and under 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.
The truth of the matter is that in IE7 and under any inline element that has haslayout applied will behave as an inline-block element.
Most other modern browser versions understand display:inline-block anyway and you can read more about it an article I wrote on Search This
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.
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
If you have floated images that wrap to the next row 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 therefore move to the beginning of the line when they wrap.
Block level elements of varying height.
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Caption
Note:doesn't work in ie5