Ich implementiere eine Paginierung, und die muss zentriert sein. Das Problem ist, dass die Links als Block angezeigt werden müssen, also müssen sie schwebend sein. Aber dann, text-align: center;
funktioniert bei ihnen nicht. Ich könnte es erreichen, indem Sie den Wrapper div padding von links, aber jede Seite wird eine unterschiedliche Anzahl von Seiten haben, so dass das nicht funktionieren würde. Hier ist mein 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 -->
Um die Idee zu bekommen, was ich will: