我正在实施分页,它需要集中.问题是链接需要显示为块,因此需要浮动它们.但是,text-align: center;对他们不起作用.我可以通过给左边的包装div填充来实现它,但是每个页面都有不同的页面数,所以这不起作用.这是我的代码:
.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);
}Run Code Online (Sandbox Code Playgroud)
<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 -->Run Code Online (Sandbox Code Playgroud)
为了得到这个想法,我想要的是:

我希望整个块在其父级中居中,但我希望块的内容保持对齐.
示例效果最佳
在本页面 :
ascii艺术应该居中(如它所示),但它应该排成一行,看起来像"YAML".
或这个 :
错误消息应该像在控制台中一样排列.