Centre a UL

HTML & CSS
1

Hi,
I’m struggling to centre a list. So far I have:


div#pagination {
	margin: 0px auto;
	text-align: center;
	border: 1px #000 solid;
}

#pagenavigation{
	margin: 10px auto;
	padding: 0;
	overflow: hidden;
	clear: both;
	text-align:center;
	border: 1px #000 solid;
}
	
	#pagenavigation li {
		padding: 0;
		margin: 0;
		display: inline;
	}
	
		#pagenavigation li a {
			display: block;
			float: left;
			padding: 5px 5px;
			border: 1px solid #FF9A00;
			background-color: #FF9A00;
			margin: 0 3px;
			color: #fff;
			text-decoration: none;
			
		}
	
		#pagenavigation li.nolink {
			display: block;
			float: left;
			padding: 5px 5px;
			border: 1px solid #FF9A00;
			background-color: #f1f1f1;
			margin: 0 3px;
			color: #000;
			text-decoration: none;
			
		}
		
		#pagenavigation li.first {
			margin: 0 3px 0 0;	
		}
	
		#pagenavigation li a.current {
			background-color: #FF9A00;
			color: #000;
		}
	
		#pagenavigation li a:hover {
			background-color: #fff;
			color: #000;
			text-decoration: none;
		}


<div id="pagination">

		<ul id="pagenavigation">

			<li class="nolink first">Page 1 of 3</li>

			<li class="nolink">1</li><li class=""><a href="/products/personal-protection-equipment-29/page-2/"><span>2</span></a></li><li class=""><a href="/products/personal-protection-equipment-29/page-3/"><span>3</span></a></li><li class=""><a href="/products/personal-protection-equipment-29/page-2/"><span>></span></a></li>

		</ul>

</div>

Can anyone see where I’m going wrong?

Thanks,
Rhys

2

Have you tried text-align: center on those? Or have I misunderstood what you’re trying to achieve?

3

I believe you need to set a width for margin: auto to function.

4

Hi,
Thanks, I tried that and the UL centred, but the list items remained on the left.

5

I have text-align: center on both the div and ul, hoping the list items will be centred.

6

Check out these links, all of which deal with this:

http://www.css-lab.com/demos/nav/inline-block/x-brwsr-node-fix.html
http://pmob.co.uk/pob/centred-float.htm
http://www.visibilityinherit.com/code/center-nav.php

Also some forum discussions:
http://www.sitepoint.com/forums/showthread.php?p=4652921#post4652921
http://www.sitepoint.com/forums/css-53/css-dropdown-menu-possbilities-770903.html#post4930394

7

Sorry - I wasn’t reading that properly.

I’m not sure I’ve understood what you’re after. Are you trying to centre the menu horizontally? Because adding a width to #pagenavigation works for me, and the link texts remains centred in the background blocks.

8

Thanks, but this is killing me now. I’ve tried every method going and everytime I have the same result:

9

Have you looked at those links I posted?

10

Hi ralph. I did and found the solution in http://www.visibilityinherit.com/code/center-nav.php

Thanks. I couldn’t get it working, so decided to go backwards with it and build up to the original styling once it was centred.

Cheers,
Rhys