[Home]Center with CSS

HomePage | RecentChanges | Preferences | Newbie Help

Category CSS FAQ

(From Rijk van Geijtenbeek on comp.infosystems.www.authoring.stylesheets on 29 October 2001)

The HTML attribute 'align=center' can not be translated directly to CSS, as it did different things for different elements.

Centering the content of block-level elements like P, H1-H6, etc.

The use of the rule 'text-align: center;' will center all the inline content of the block-level element. The element itself still occupies all of the available width.

Centering an IMG

An IMG is defined as an inline element – it goes with the flow in a paragraph of text just like a B or an CODE. Inline elements cannot be centered themselves.

Solution: wrap the IMG in a otherwise empty DIV, and center the content of this DIV with 'text-align: center;'

Centering block-level elements themselves, not their content

This is only possible when the block-level element has a width that is less than the available horizontal space. By default, all block-level elements (except TABLE, which is a special case) expand to fill the entire available horizontal space, even when they don't need to on behalf of their content.

Solutions:

DIV.x {width: 50%; margin-left: auto; margin-right: auto;}

DIV.y {display: table; margin-left: auto; margin-right: auto;}

A solution that only works in browsers that don't get the CSS box model right is this one:

<div style="text-align: center"><div> ...
This will fail to work in Opera 4+, Netscape 6+, Mozilla, and MSIE 6 in standards mode.

Tip 1: Set temporary colored borders on the block-level element to see what's happening in various browsers.

Tip 2: Don't expect much from Netscape 4.x.

If you are centering a layer which contains the entire document, you can do it by setting the body's padding-left to 50%. Then position the layer relatively and give it a left of minus half its width. This works in IE6 and Mozilla, but is screwed up in Dreamweaver MX.

To make the above editable by Dreamweaver MX, you can do it by again setting the body's padding-left to 50%, but this time set the right of the layer to half its width. (Your mileage may vary.)

You can also use the following CSS as a solution for centering a div containing the whole document:

body { text-align: center;}
div.main { text-align: left; width: 70%; margin-left: auto; margin-right: auto; }
In this example, the div containing the main content would have the class "main". This works for versions of Internet Explorer which don't support the correct way of doing it by using the "text-align: center;" property for the body. The other text-align for the div corrects the fact that all of the text in that div is also centered by IE.

Centering a TABLE

Centering a table should work the same as for block-level elements. Keep in mind that tables do not expand to fill the entire available horizontal space unless the content inside the table requires it.

This works in all compliant browsers:

TABLE {margin-left: auto; margin-right: auto;}

For some older CSS-capable browsers, this addition can be useful:

TABLE {margin-left: auto; margin-right: auto; text-align: center;}

You should also add:

TD {text-align: left;}

... to prevent some (hypothetical) problems in compliant browsers.

MSIE 6 reacts differently depending on the rendering mode it is in. This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and Netscape 4.x without setting any explicit widths:

div.centered {text-align: center;}
div.centered table {margin: 0 auto; text-align: left;}
<div class="centered"><table>
...
</table>
</div>

To also work in Mac IE 5, the margin setting on this style needs to be in the long form:

div.centered table {margin-left: auto; margin-right:auto; text-align: left;}

Comments --

(Nick Theodorakis): For centering tables when viewed with IE5 (on Win) and NS4.x, I find it helpful to put a <div> around the table which is styled with "text-align:center."

For my own testing with different browsers, I made a little example page:

http://theodorakis.net/tablecentertest.html

Mark Gallagher sez: [Bluerobot.com] Has more info under "the layout reservoir". This would also be good for those interested in CSS positioning...


Tips --

Mark says: if you're planning to use the wrap-your-elements in a <div> with "text-align: center;", and you plan to use this often, you may find it useful to define a .center class. Change your divs to <div class="center">, then in your CSS put ".center { text-align: center; }" (formatted as you desire). This will eventually save an awful lot of typing, trust me...


HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited May 3, 2003 9:50 pm (diff)
Search:

This FAQ is happily hosted by Betadome Digital Media