Como centralizo elementos de flutuação?

Estou implementando a paginação e ela precisa ser centralizada. O problema é que os links precisam ser exibidos como bloco, portanto, precisam ser flutuados. Mas então,text-align: center; não funciona neles. Eu poderia conseguir isso dando o preenchimento div do wrapper à esquerda, mas cada página terá um número diferente de páginas, para que não funcionasse. Aqui está o meu código:

.pagination {
  text-align: center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}
<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

Para entender, o que eu quero:

questionAnswers(11)

yourAnswerToTheQuestion