Question

我有一个要居中的分页元素，它们是使用jPagination jQuery插件创建的。

以下是实时预览： http://jsbin.com/rumoqozobi/edit?html,output

代码如下：

array

$(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的按钮位于其他元素的下面，我希望所有元素都排成一行。

如何将它们居中并保持在同一行？

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

Answer 1

在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>

水平居中分页

1 个答案: