center horizontal navigation menu

Hi, I’ve been trying to center my nav bar using the following tutorial:

https://css.maxdesign.com.au/listamatic/horizontal16.htm

This is my code:

#nav {
	position: absolute;
	bottom: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	background: url(img/bg-menu.gif) repeat-x left top;

	}

#nav a{
	display: block;

	text-decoration: none;

	}

#nav a:hover {
	display: block;
background: #6e7073;

	text-decoration: none;

	}

#nav {
	width: 100%;
	list-style: none;
	line-height: 30px;
background: #4a4f54;

	}

#nav ul {
	width: 100%;
	list-style: none;
	line-height: 30px;
background: #4a4f54
text-align:center;

	}

#nav li {

float: left;
text-align: center;
list-style: none;
border-left: 1px solid #6e7073;
border-right: 1px solid #6e7073;
margin-right: -1px;
	}

#nav a, #nav a:visited {
	display: block;
	color: #fff;
	padding: 0 20px;
	}

#nav a:hover, #nav a:active, .current_page_item	a, #home .on {
	text-decoration: none;
	}

That is the code without editing in the necessary (to my knowledge) display: inline;and text-align center codes. Display inline and text-align don’t seem to work. And removing the float: left in #nav li turns it into a vertical menu. Is this normal behaviour? What am I doing wrong? =[

How would one go about centering my nav menu, for the provided code particularly?