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:
