How do I center floated elements?

by

I’m implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn’t work on them. I could achieve it by giving the wrapper div padding of left, but every page will have a different number of pages, so that wouldn’t work. Here’s my code:

.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 -->

To get the idea, what I want:

alt text

12 Answers
12

Leave a Comment