Witam!

Mam problem z wycentrowaniem paginacji.

Na początek screen:


a ) nr 1 - jak widać pojedyncze cyfry są centralnie wyśrodkowane w tej paginacji, natomiast jeśli są już liczby dwucyfrowe, to całość odbiega trochę zbyt na prawą stronę, nie mogę dojść do tego, dlaczego tak się dzieje.
B ) zaznaczyłem numerem 2 główny div strony (czarna obwódka to border tego diva), a numerem 3 zaznaczyłem główny div paginacji (czarna obwódka to border tego diva). I teraz, nie potrafię sprawić, aby cała ta paginacja się wycentrowała ;/ Obecnie, jak widać, jest po lewej stronie. Chodzi o to, że jeśli ustawiłbym na diva od paginacji np. width: 60% to problem znika, ale nie mogę tak zrobić bo paginacja jak paginacja... raz są dwa numerki, a raz kilkanaście i wtedy się to nie mieści w jednej linii i szpeci.

CSS paginacji:

[CSS] pobierz, plaintext 
#pagination {
margin: 0 auto;
text-align: center;
padding: 0;
border: 1px solid #000;
width: 100%;
}
 
#pagination .elements a {
text-decoration: none;
border: 1px solid #CCC;
margin-right: 10px;
float: left;
width: 20px;
padding: 10px;
line-height: 100%;
font-family: Verdana;
font-size: 15px;
color: #33A1DE;
font-weight: bold;
text-align: center;
background: #fff;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
 
#pagination .elements a:hover {
text-decoration: none;
border: 1px solid #9BBDEF;
background: #D2DEF0;
}
 
#pagination .separator {
float: left;
margin-right: 10px;
padding: 10px;
line-height: 100%;
font-family: Verdana;
font-size: 15px;
}
 
#pagination .active {
text-decoration: none;
border: 1px solid #969696;
margin-right: 10px;
float: left;
width: 20px;
padding: 10px;
line-height: 100%;
font-family: Verdana;
font-size: 15px;
color: #000;
font-weight: bold;
text-align: center;
background: #D7D7D7;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
}
[CSS] pobierz, plaintext 

Przykładowy kod HTML:

[HTML] pobierz, plaintext 
<div id="pagination">
	<div class="elements"><a href="#">ť</a></div>
	<div class="elements"><a href="#">1</a></div>
	<div class="elements"><a href="#">1</a></div>
	<div class="active">7</div>
	<div class="elements"><a href="#">1</a></div>
	<div class="elements"><a href="#">1</a></div>
	<div class="separator">...</div>
	<div class="elements"><a href="#">14</a></div>
	<div class="elements"><a href="#">14</a></div>
	<div class="elements"><a href="#">1</a></div>
	<div class="elements"><a href="#">14</a></div>
	<div class="elements"><a href="#">1</a></div>
	<div class="elements"><a href="#">1</a></div>
	<div class="elements"><a href="#">Ť</a></div>
	<div style="clear: both;"></div>
</div>
[HTML] pobierz, plaintext 

Jakieś rady?

Dziękuję!

ad. 1
dla elementu '#pagination .elements a' masz ustawioną szerokość na 20px. zamiast width: 20px; daj min-width: 20px;

Faktycznie, nie pomyślałem, dziękuję!
Jeszcze jakby ktoś podpowiedział z problemem drugim? ;>

Id pagination powinien wyglądać jak poniżej i myślę, że powinno pomóc.

[CSS] pobierz, plaintext 
#pagination {
				margin: 0 auto;
				text-align: center;
				padding: 0;
				border: 1px solid #000;
				width: 100%;
 
				/* Firefox */
				display:-moz-box;
				-moz-box-pack:center;
				-moz-box-align:center;
 
				/* Safari, Chrome, and Opera */
				display:-webkit-box;
				-webkit-box-pack:center;
				-webkit-box-align:center;
 
				/* W3C */
				display:box;
				box-pack:center;
				box-align:center;
			}
[CSS] pobierz, plaintext 

dziękuję!