Need to center a UL upon list break (wrap)

HTML & CSS
1

I’m trying to keep a list centered when it wraps. The list I’m working on is below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>This is a test page</title>
	<style type="text/css">

		#navcontainer{
			margin: 10px 0 0 30px;
			padding: 0;
			height: 20px;
		}

		#navcontainer ul{
			border: 0;
			margin: 0;
			padding: 0;
			list-style-type: none;
			text-align: center;
		}

		#navcontainer ul li{
			display: block;
			float: left;
			text-align: center;
			padding: 0;
			margin: 0;
		}

		#navcontainer ul li a{
			background: #fff;
			width: 78px;
			height: 18px;
			border-top: 1px solid #f5d7b4;
			border-left: 1px solid #f5d7b4;
			border-bottom: 1px solid #f5d7b4;
			border-right: 1px solid #f5d7b4;
			padding: 0;
			margin: 0 0 10px 0;
			color: #f5d7b4;
			text-decoration: none;
			display: block;
			text-align: center;
			font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
		}

		#navcontainer li#active a{
			background: #c60;
			border: 1px solid #c60;
			color: #fff;
		}
	</style>
</head>

<body>

<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current">Item one</a></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
		<li><a href="#">Item four</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
		<li><a href="#">Item five</a></li>
	</ul>
</div>

</body></html>

How can I keep the thing centered? The “float:left” is causing the problems but apparently this is needed to make the things mimick “display:inline.”

This goes without saying that all I need is a simple centered list that stays centered when the list is wrapped. Can this be done?

2

Your Welcome, Glad it worked out for you :slight_smile:

3

This goes without saying that all I need is a simple centered list that stays centered when the list is wrapped. Can this be done?

I would use Centered-Inline-Blocks if I needed to do that.

Be sure to read the entire widthless float article and be aware of the “Drawbacks” that Paul makes note of. You will also see that Inline-Block is mentioned as a good alternative.

4

Rayzur, I really appreciate the help with this. It was driving me nuts and your suggestion about the “inline block” fixed everything I had to have fixed! Thanks a ton!

5

Shoot. I found some answers:
http://www.pmob.co.uk/temp/centred-float4.htm