home > howto > center image

Center an Image using CSS

This method works on all the new browsers (IE7, Firefox 2, etc) and most old browsers.

The CSS

.centerimg
{ 
text-align: center;  /* for older IE browsers */
margin: 0 auto;
display: block;
}

Analysis

The first style is applied to the <div> that contains the <table>; this will allow MSIE5 and NS4 to center the table. The next style applies to a <table> that is contained within that <div>; the margin settings will allow centering in CSS-compliant browsers and the text alignment will reset the default alignment for table cells to “left” for browsers in which the text alignment of the <div> is inherited.

An example of a <table> styled this was is as follows:

This table was centered by all the browsers tested, and the cell contents also maintained their default left-alignment.