So I am creating a footer navigation that I want to appear centered inside its containing div. The problem is that it's a horizontal navigation so the anchor tags are blocks and floated left. The way I have solved it right now is to add left padding to the <ul> tag to push the list elements (of which there are five) to the centre. The problem is that the site will eventually be developed by someone else (who isn't necessarily as knowledgeable on css), so when they add more links it will no longer be centered.

What is the easiest way to go about solving this?

FredVaux.com | LightFused.net

[David_King]

If you're not arsed about having all the links equal width, try "inline" styling:

<ul id="footer">
  <li>link one</li>
  <li>link 2</li>
  <li>link three</li>
  <li>link four</li>
</ul>

ul#footer {list-style-type: none; margin: 0; text-align: center;}
ul#footer li {display: inline; padding: 0 5px;}

Something like that (off the top of my head)

[flashkicks]

Thanks, but this doesn't work. The links just go back to being at the left.

[uxte]

Here you have

*{padding:0; margin:0}

body{text-align:center}

#wrap{width:850px; margin:0 auto 0 auto}

#footer {width:100%; border:red 6px solid}

ul#footer-nav{list-style-type:none; border:green 6px solid}
ul#footer-nav li{margin:10px; display:inline; border:gray 6px solid}

<div id="wrap">
	<div id="footer">
		<ul id="footer-nav">
			<li><a href="#" title="link 1">link 1</a></li>
			<li><a href="#" title="link 2">link 2</a></li>
			<li><a href="#" title="link 3">link 3</a></li>
			<li><a href="#" title="link 4">link 4</a></li>
			<li><a href="#" title="link 5">link 5</a></li>
		</ul>
	</div>
</div>