Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: not2easy
Pleaser advise on the simple question for a newbie.
I need to align three DIVs boxes one after each other at the center of the screen. I cannt find a CSS tag for that...!?
How do you do that?
I have basically three linkable categories and I want them to be aligned at the center. I set up a 3 CSS CLASSES for these three categories and the CSS looks like this:
So, the DIVs are displayed in a row, but at the left of the screen, whereas I want them to be relatively at the center...
Please, help :)
margin: 4px auto;
That should center them once you give each box a width smaller than the screen. If it's not then you're probably using IE5 or IE6 in quirks mode. Make sure you've got a full doctype on the page (and nothing above it).
Be aware that this centering method works only in old versions of IE (5.0, 5.5) and does not have the effect you want in any modern, standards-compliant browser. It works in legacy IE versions because the old IE engine mistakenly applied text-align properties to block level elements. This was and is a spec violation (text-align is supposed to effect the inline content of block level elements, not the block level element itself) and is fixed in IE6/StandardsMode. If the page has a valid doctype, IE6 will not center using this method. Decent browsers won't center with this no matter what you do.
The proper standards-compliant centering method is the auto-margin ttechnique describe dby several posters above. it requires that the element being centered has an explicit width and an auto value for the left and right margins.
When used in conjunction with the IE text-align thing (which must be set on the parent of the element being centered) you have a cross-browser centered page. With only one or the other, there is a hole in the layout's implementation.
In the interest of completeness, here's another option for centering.
Set the element being centered to position:absolute. Give the element a left:50% and then a negative margin at half of it's explicit width. This moves it halfway across the parent element, then drags it back to the left by half it's width, centering it in the element...
Note that if you need the element centered in a parent that is NOT the body element, you'll need to set that parent to position:relative.