Centering CSS Menu buttons

[patchkinz]

Hey everyone,

I would like to center buttons on a CSS based menu instead of them being aligned to the left. I tried changing the "float:left;" with no luck.

Thanks,
patchkinz

[timgolding]

you can try text-align:center;

if that doesn't work make the parent

text-align:center;

and the children

margin-left:auto;margin-right:auto;

That's just an example if you post your code i can help you apply it

[patchkinz]

you can try text-align:center;

if that doesn't work make the parent

text-align:center;

and the children

margin-left:auto;margin-right:auto;

That's just an example if you post your code i can help you apply it

Thank you!

I am fairly new to CSS.

Here's my code:

.blue #slatenav
{
position:relative;
display:block;
height:42px;
font-size:13px;
font-weight:bold;
background:transparent url(images/blueslate_background.gif) repeat-x top left;
font-family:Times New Roman,Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;
}

.blue #slatenav ul
{
margin:0px;padding:0;
list-style-type:none;
width:auto;
}

.blue #slatenav ul li
{
display:block;
float:left;margin:0 1px 0 0;
}

.blue #slatenav ul li a
{
display:block;
float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;
}

.blue #slatenav ul li a:hover
{
text-decoration: underline;
}

.blue #slatenav ul li a.current
{
color:#fff;background:transparent url(images/blueslate_backgroundOVER.gif) no-repeat top center;
}

HTML:

<div class="blue">
    <div id="slatenav">
	<ul>
	<li><a href="" title="" class="current">Home</a></li>
	<li><a href="" title="">About Us</a></li>
	<li><a href="" title="">Services</a></li>
	<li><a href="" title="">Our Work</a></li>
	<li><a href="" title="">Contact Us</a></li>
	</ul>
    </div>
  </div>

Thank you for the help,
patchkinz

[Excavator]

Hello patchkinz,
To center something you need 3 things:

1. a DocType
2. an element with a width
3. left and right margins of that element set to auto

Give your ul a width and set it's margins to margin:0 auto;

This ul menu of unknown width is centered by % -
http://nopeople.com/CSS/menu-h_centered-ul/index.html - view the source to see how.

[timgolding]

I've looked at your example and am wondering is it really centering you are after. Or maybe just having them evenly spaced out. Something like this
http://www.sovavsiti.cz/css/horizontal_menu.html

[patchkinz]

I've looked at your example and am wondering is it really centering you are after. Or maybe just having them evenly spaced out. Something like this
http://www.sovavsiti.cz/css/horizontal_menu.html

the second one on their, Variable padding, would be great.

If you could add that in my code i'd really appreciate that.

patchkinz

[patchkinz]

Hello patchkinz,
To center something you need 3 things:

1. a DocType
2. an element with a width
3. left and right margins of that element set to auto

Give your ul a width and set it's margins to margin:0 auto;

This ul menu of unknown width is centered by % -
http://nopeople.com/CSS/menu-h_centered-ul/index.html - view the source to see how.

I have a DocType, I just added the HTML for the menu.

Thanks for your help,
patchkinz