Quick CSS Problem - Trying To Get List To Line Up Centrally

Hi there,

Was wondering if someone could please help. I'm trying to get a list to line up centrally on my page, at the moment it is stuck to the left. You can see the problem at this page (the very top line of text I want to align centrally).
http://www.the-biomatrix.net

Here is the code on the index.htm page:

And this is the code in the style.css file:

If anyone can help then that would be great, I'm sure it can't be a massive problem, I'm probably just making a silly mistake.

Cheers

 

1. set left-right margin of #dogmenu to auto
2. assign a width to #dogmenu

If I take your css, then,

 

Thank you very much Radiant_luv. I've set the width as 80% and it appears okay in my browser. Would appreciate it if anyone could check out the URL and see if the top line appears to be central.

Thanks again!

 

Anytime.

checked in FF, your last menu item is pushed to next line; that's because there is not enough room for all items when you've specified 80%, why not set a width 985px, that's shows okay, checked in firebug.

 

Nope, it really is a problem if you want to avoid setting a width

One way is to use text-align: center for the list. Another way is to use display: table but that did not work in IE7.
The floated list items did not work in IE7 either so I had to use display: inline, but that meant removing the anchor blocks.

* {
	margin: 0;
	padding: 0;
}

#dogmenucontainer{
	background: #000044;
	border:1px solid #000;
	font: 14px "Century gothic",verdana, Arial, sans-serif;
	height:21px;
}

#dogmenu ul {
	list-style: none;
	text-align: center;
}

#dogmenu a {
	color: #fff;
	padding: 1px 10px;
}

#dogmenu a:hover {
	color: #A7A7A7;
	text-decoration: none;
}

#dogmenu li {
	display: inline;
} 

Code (markup):

 

Thanks guys, I've changed it again, hopefully its looking okay now.

 

Sorry but I have to correct this:

margin:0 auto; would not mean margin: right left ... totally wrong.

It works like a clock: margin: TOP RIGHT BOTTOM LEFT.

So if you use margin:0 auto you would set margin: TOP (0) RIGHT (auto) BOTTOM (0) LEFT (auto).

 

lol. I din't know that

or let me help you out, I havn't kept this part "set left-right margin of #dogmenu to auto " inside "quote", did I? I think I'm clear that left & right margin to be set to auto. and the code inside the quote to help him out.

sorry, this is offtopic; okay, can someone tell me more post means more rep? ...