我有一个要居中的分页元素，它们是使用jPagination jQuery插件创建的。
这是实时预览：
http://jsbin.com/rumoqozobi/edit?html,output
这是代码：
$(function() {
$("#paginate").paginate({
count : 100,
start : 1,
display : 8,
border : true,
border_color : '#fff',
text_color : '#fff',
background_color : 'black',
border_hover_color : '#ccc',
text_hover_color : '#000',
background_hover_color : '#fff',
images : false,
mouse : 'press'
});
});body{
text-align: center;
}
.jPaginate {
width: auto !important;
display: inline-block;
}<!-- Stylesheet -->
<link rel="stylesheet" type="text/css" href="https://tympanus.net/OldDemos/jPaginate/css/style.css" media="screen">
<!-- Pagination container -->
<div id="paginate"></div>
<!-- jQuery -->
<script type="text/javascript" src="https://tympanus.net/OldDemos/jPaginate/jquery-1.3.2.js"></script>
<!-- jPagination.js -->
<script src="https://tympanus.net/OldDemos/jPaginate/jquery.paginate.js" type="text/javascript"></script>我试过了：
.jPaginate {
display: table;
margin: auto;
}
还有
position，transform，但是没有用。名为
Last的按钮位于其他元素之下，我希望所有元素都排成一行。如何将它们居中并保持在同一行上？
我需要一种适用于大多数浏览器的解决方案
最佳答案
在style中尝试以下CSS
body {
display: flex;
justify-content: center;
}
#paginate {
display: inline-block;
}
此外，在
#paginate下设置一个父级<div class="parent">
<div id="paginate"></div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="https://tympanus.net/OldDemos/jPaginate/css/style.css" media="screen">
<style>
body {
display: flex;
justify-content: center;
}
#paginate {
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div id="paginate"></div>
</div>
<script type="text/javascript" src="https://tympanus.net/OldDemos/jPaginate/jquery-1.3.2.js"></script>
<script src="https://tympanus.net/OldDemos/jPaginate/jquery.paginate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#paginate").paginate({
count: 100,
start: 1,
display: 8,
border: true,
border_color: '#fff',
text_color: '#fff',
background_color: 'black',
border_hover_color: '#ccc',
text_hover_color: '#000',
background_hover_color: '#fff',
images: false,
mouse: 'press'
});
});
</script>
</body>
</html>关于html - 水平居中分页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52457227/