水平对中分页

问题描述 投票:0回答:1

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

还有positiontransform,但没有奏效。

名为Last的按钮变为其他元素下方,我想将它们全部放在一行上。

如何将它们居中并将它们放在同一排?

我需要一个适用于大多数浏览器的解决方案

html css html5 css3 cross-browser
1个回答
0
投票

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>
© www.soinside.com 2019 - 2024. All rights reserved.