Joomla! Documentation™

Horizontal centering is achieved with CSS in one of two ways, depending on what you are centering.

For the first example, let's say you have a horizontal menu at the top of your page that you want centered in your layout. You would do it with a block of code in the linked CSS file like this:

#horz_menu {margin: auto; width: 900px; height: 25px; }

The "auto" value in the "margin" attribute centers the item, so this would create a menu area that is 900 pixels wide and 25 pixels tall and would be centered in whatever space it is placed in.

If you need to add some margin space above and below the menu and still keep it centered you would adjust the code like this:

#horz_menu { margin: 20px auto 20px auto; width: 900px; height: 25px; }

This would add 20 pixles of space on the top and bottom of the menu while keeping the left and right margin in a centered mode.

The second example is when you simply want to center text, in which case you just add the "text-align" code.

#main_menu h1 { padding: .75em 0 .52em 0; font-size: 0.8em; font-weight: bold; color: #0033CC; background-color: transparent; text-align: center; }

This would cause text in an h1 tag within the main_menu div tag of the html code to be centered in the horizontal menu. It would also have some padding above and below it.

--daganray 09:54, 15 November 2009 (UTC)