Как выровнять список страниц по центру блока навигации

[Mila]

Проблема со стилями нумерации страниц.

Блок wp_page_numbers имеет ширину 600px.

Ссылки с номерами страниц должны располагаться по центру блока независимо от того, сколько их будет - одна или 20.

У меня никак не получается выровнять список страниц по центру блока навигации.

#wp_page_numbers {   
  clear: both; 
  width : 600px; 
  height : auto; 
  text-align: center!important; 
  font-weight : normal; 
  margin: 10px auto 20px;
}
#wp_page_numbers ul, #wp_page_numbers li, #wp_page_numbers a {
	padding: 0;
	margin: 0;
	border: none;
	text-decoration: none;
	font-weight: normal;
	font-style: normal;
	list-style: none;
	text-transform: none;
	text-indent: 0;
	font-variant: normal;
	letter-spacing: 0;
	word-spacing: 0;
	font-size: 13px;
	font-family: Arial;
}
#wp_page_numbers ul {  
  text-align: center; 
  margin: 0 auto 0;
  overflow: hidden;
}
#wp_page_numbers li { 
	float: left;
	display: block;
}
#wp_page_numbers a {
	background: #fff;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 2px;
	margin-right: 2px;
	display: block;
	color: #333;
	border: 1px solid #bfbfbf;
}

У кого есть идеи ?

[WalkMan]

если хтмл имеет вид

<ul>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

<li><a href="#"></a></li>

</ul>

то ул алигн центр

ли свойство дисплей инлайн

ну и тег а тож инлайновый

[Mila]

К сожалению, не помогло.

Список страниц упорно держится слева.

Может еще кто нибудь помочь?

[fl4sh]

а зачем нужны ul и li?

кажется без них нормально работает

<style>
#wp_page_numbers {  
	clear: both;
	width : 600px;
	height : auto;
	text-align: center!important;
	font-weight : normal;
	margin: 10px auto 20px;
}
#wp_page_numbers a {
	text-decoration: none;
	background: #fff;
	padding: 2px;
	padding-left: 5px;
	padding-right: 5px;
	margin-left: 2px;
	margin-right: 2px;
	color: #333;
	border: 1px solid #bfbfbf;
}
</style>

<div id = 'wp_page_numbers'>
	<a href = '#'>1</a>
	<a href = '#'>2</a>
	<a href = '#'>3</a>
	<a href = '#'>4</a>
	<a href = '#'>5</a>
</div>

Edited December 8, 2010 by fl4sh

[Быколай]

#wp_page_numbers ul {  
  text-align: center;
  margin: 0 auto 0;
  overflow: hidden;
  display: inline-block;
}

попробуйте. а лучше display: table;

Edited December 8, 2010 by Быколай

[Mila]

Быколай, спасибо, помогло.

Если можете, объясните, пожалуйста, как это работает.

[runet]

Вот еще вариант

CSS:

#wp_page_numbers {
				  clear: both;
				  width : 600px;
				  text-align: center!important;
				  font-weight : normal;
				  margin: 10px auto 20px;
				  margin:0;
				  padding:0;
				 }
				 #wp_page_numbers ul{
									list-style-type: none;
									margin: 0 auto;
									}
									#wp_page_numbers ul li{
														  display: inline;
														  }
												 #wp_page_numbers ul li a{
																		 padding: 2px 7px;
																		 color: #333;
																		 border: 1px solid #bfbfbf;
																		 text-decoration: none;
																		 outline: none;
																		 display: inline-block;
																		 }

HTML:

<div id="wp_page_numbers">
	<ul>
	  <li><a href="#" title="#">1</a></li>
	  <li><a href="#" title="#">2</a></li>
	  <li><a href="#" title="#">3</a></li>
	  <li><a href="#" title="#">4</a></li>
	  <li><a href="#" title="#">5</a></li>
	</ul>
</div>

p.s. Не увидел что уже помогли. Будет еще вариант )))

[Mila]

runet, спасибо.

Попробую и ваш вариант.