There are many ways to center HTML content horizontally on the page. Traditionally, many webmasters use tables for layouts, and often solely to center content horizontally; some use floating divs; some even revert to absolute positioning and usage of JavaScript.
Today I’m glad to tell you about a very easy, very fast, and very predictable way of centering your content horizontally. Meet the display: inline-block CSS rule!
As soon as you apply it to the divs you need to center, just add the text-align: center rule to their container, and you’re done! Your divs will maintain their alignment at all times, from very small to very large window widths. You can see a demonstration here; remember to check out the source code to see how cleanly it looks.
Update
Apparently Internet Explorer can only assign inline-block display type to elements that are natively inline (such as spans). So we just replace divs with spans, and voila! Everything works now in IE, too, while nothing changes in other browsers.
Update 2
Pay attention to the “vertical-align: top” CSS rule. Without it, IE would align the tallest span in the row by the bottom of the row, while Firefox and Webkit-based browsers align such spans by the top of the row by default. Adding this rule allows our markup to look completely uniform in all major browsers.
Update 3
It is also possible to achieve the desired effect without reverting to spans: use IE conditional comments to tell it that divs are inline, while all other browsers get the inline-block rule. This will allow your markup to remain valid from W3 specs point of view even when you need to inject block elements into your centered elements (doing so with spans will violate the specs). I will update my example accordingly.
There are only two minor caveats to keep in mind (both of them are illustrated in the supplied example page):
1) In the end of the horizontal block you want to center, put a
element.
2) Comment out newlines between elements in a horizontal block, otherwise in some browsers you will see white spaces between them.
Please report if you find a case where this method fails to deliver.
October 30, 2009 at 20:14 |
{margin:0 auto} пробовал?
October 30, 2009 at 20:58 |
div style=”float: left/right” на margin: auto не реагируют.
Rumith, you’re cheater. Span was always inline-element.
W3.ORG says:
document type does not allow element “div” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag
The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as “” or “”) inside an inline element (such as ““, “”, or “”).
If you are using “display: inline-block”it won’t turn span to block-being.
Of course, it’s much easier to center ‘em.
Me, your previous solution was much more suitable.
October 31, 2009 at 12:33 |
Yes I have. Setting automatic margins doesn’t really work well to the case when you have multiple adjacent divs in a row and need wrap the row while keeping them all centered when the window is too narrow for them to fit. Besides, for automatic margins to work, you need to specify div’s dimensions; in the solution above it is optional.
November 8, 2009 at 21:24
Ок, спасибо. Возьму на заметку
October 30, 2009 at 21:00 |
P.S. sorry about tags:
…
<span style=”display:inline-block;”><div></div></span>
…
(such as “<p>” or “<table>”) inside an inline element (such as “<a>”, “<span>”, or “<font>”).
October 31, 2009 at 4:33 |
We don’t use floating divs anymore
Inline and inline-block are different things, and while theoretically inline-block div == inline-block span, Internet Explorer only knows how to process the latter. Thus, we use spans. Yeah, and I just fixed it to be a valid XHTML document, are you happy now? 
October 31, 2009 at 11:39 |
no, i’m not happy. Do you suggest to put everywhere i wanna place div?!
div
div – icon
form
div – button
div