Центрирование нумерации по горизонтали - PullRequest
0 голосов
/ 22 сентября 2018

У меня есть элементы разбиения на страницы, которые я хочу центрировать. Они созданы с помощью плагина 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 становится ниже других элементов, я хочу, чтобы все они были в одном ряду.

Как расположить их по центру и сохранить их в одном ряду?

Мне нужно решение, которое будет работать в большинстве браузеров

1 Ответ

0 голосов
/ 22 сентября 2018

Попробуйте следующее css в вашем style

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...