我有一个我想要居中的分页元素,它们是用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>