CSS question... How to centre my buttons (DIV)

[Firegod]

Hello!

I'm helping my friend make a website and I've grabbed one of those free CSS Templates. I would like to centre the buttons under the logo I have made, but, I'd also like them to stay in that position so that if I were to resize the browser window they would not move.

At the moment, they all go from a neat row of a buttons and drop down under one another depending on how much the Window is reduced. So I designed the first page on my screen (24") but on my friends laptop, the buttons were all over the place.

I went back to the start and can now get the menu to stay on the one line, however it's set off to the left still; not centred.

I tried wrapping the first DIV with anoter DIV, code from the CSS:-

#wrapper {
	margin: auto;
}

#menu {
	width: 1000px; 
	height: 58px;
	margin: 0 auto; 
	padding: 1px 0;
	background: url(images/img02.jpg) repeat center top;
}

#menu ul {
	height: 58px;
	margin: 0;
	padding: 0;
	background: url(images/img03.gif) no-repeat;
	list-style: none;
}

#menu li {
/*	float: left; */
	display: inline; 
	height: 58px;
	background: url(images/img03.gif) no-repeat right top;
}

#menu a {
/*	float: left; */
	margin: 0 auto;
	height: 58px;
	padding: 17px 10px 0 10px;
	text-decoration: none;
	font-size: 1em;
	font-weight: bold;
	color: #000000;
}

As you can see, I've commented out the float:left; parts. Code from main page:-

...

<div id="wrapper">
<div id="menu">
  <ul>
    <li><a href="abc.html">abc</a></li>
    <li><a href="abc.html">abc</a></li>
    <li><a href="abc.html">abc</a></li>
    <li><a href="abc.html">abc</a></li>
  </ul>
</div>
</div>
...

Any help please?

Thanks!

 

[Firegod]

ARGH! Just sorted it..... Typical again after posting for help...

I had to put:-

text-align: center;

Within the #wrapper section as well.

Seems to have done the trick!

 

[Muel]

text-align: center; will align everything inside the Div to the centre of that Div.

If you want to align the div itself to the centre of the screen, you can use:

margin: 0 auto;