Как выровнять по центру цифры в постраничной навигации на сайте?

@nedopiv · Регистрация: 31.05.2016

Студворк — интернет-сервис помощи студентам

Суть моей проблемы проста. На сайте (движок wordpress) имеется постраничная навигация состоящая из двух кнопок (следующая страница, предыдущая страница), которые стоят по краям страницы а сами номера страницы выровнены по левому краю, а необходимо чтобы номера страниц были всегда по центру не смотря на количество цифр. Ссылка на сайт
Постраничная навигация выводится с помощью функции:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function wp_corenavi() {
global $wp_query, $wp_rewrite;
$pages = '';
$max = $wp_query->max_num_pages;
if (!$current = get_query_var('paged')) $current = 1;
$a['base'] = str_replace(999999999, '%#%', get_pagenum_link(999999999));
$a['total'] = $max;
$a['current'] = $current;
 
$total = 0; //1 - выводить текст "Страница N из N", 0 - не выводить
$a['mid_size'] = 1; //сколько ссылок показывать слева и справа от текущей
$a['end_size'] = 1; //сколько ссылок показывать в начале и в конце
$a['prev_text'] = ''; //текст ссылки "Предыдущая страница"
$a['next_text'] = ''; //текст ссылки "Следующая страница"
 
if ($max > 1) echo '<nav class="navigation">';
if ($total == 1 && $max > 1) $pages = '<span class="pages">Страница ' . $current . ' из ' . $max . '</span>'."\r\n";
echo $pages . paginate_links($a);
if ($max > 1) echo '</nav>';
}

СSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.navigation {
    float: left;
    width: 600px;
    margin: 0px 50px 0px;
    font-size: 16px;
}
.navigation > a {
float: left;
width: 32px;
font-weight: 700;
text-align: center;
color: #637b93;
text-decoration: none;
margin-left: 1px;
padding-top: 7px;
}
.navigation > .current {
float: left;
font-weight: 700;
width: 29px;
text-align: center;
color: #c4c8cc;
margin-left: 5px;
padding-top: 7px;
}
.navigation > .prev {
float: left;
width: 32px;
height: 34px;
background: url('images/bow_left.png') no-repeat;
margin-left: 0;
}
.navigation > .next {
float: right;
width: 34px;
height: 34px;
background: url('images/bow_right.png') no-repeat;
margin-left: 14px;
}
.navigation > .dots {
float: left;
font-size: 14px;
font-weight: 700;
width: 32px;
text-align: center;
color: #c4c8cc;
padding-top: 7px;
}

Отображение кода на сайте

HTML5
1
2
3
4
5
6
7
8
9
<nav class="navigation">
<a class="prev page-numbers" href="http://moviesfox.ru/page/1/"></a>
<a class="page-numbers" href="http://moviesfox.ru/page/1/">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="http://moviesfox.ru/page/3/">3</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="http://moviesfox.ru/page/9/">9</a>
<a class="next page-numbers" href="http://moviesfox.ru/page/3/"></a>
</nav>

Как выровнять по центру цифры в постраничной навигации на сайте?

@Resume · 04.06.2016, 15:07

CSS
1
2
3
4
5
.navigation{
margin: 0 auto;
width: 600px;
font-size: 16px;
}

@mrtoxas · 04.06.2016, 15:20

Зачем вешать float-left на <а> и <span>, если они по умолчанию float-left? Вот, код без флоатов и все лишнее поубирал:
http://codepen.io/mrtoxas/pen/LZVdVv

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.navigation {
  position: relative;
  text-align: center;
  width: 600px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 34px;
}
.navigation .dots {
  font-size: 14px;
  font-weight: 700;
  color: #c4c8cc;
}
.navigation .dots:before {
  content: '...';
}
.navigation a {
  font-weight: 700;
  color: #637b93;
  text-decoration: none;
}
.navigation .page-numbers {
  margin: 0 10px;
}
.navigation .current {
  font-weight: 700;
  color: #c4c8cc;
}
.navigation .prev {
  width: 32px;
  height: 34px;
  background: url('http://moviesfox.ru/wp-content/themes/Boxoffice/images/bow_left.png') no-repeat;
  position: absolute;
  left: 0;
}
.navigation .next {
  width: 34px;
  height: 34px;
  background: url('http://moviesfox.ru/wp-content/themes/Boxoffice/images/bow_right.png') no-repeat;
  position: absolute;
  right: 0;
}

HTML5
1
2
3
4
5
6
7
8
9
<nav class="navigation">
<a class="prev" href="http://moviesfox.ru/page/1/"></a>
<a class="page-numbers" href="http://moviesfox.ru/page/1/">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="http://moviesfox.ru/page/3/">3</a>
<span class="page-numbers dots"></span>
<a class="page-numbers" href="http://moviesfox.ru/page/9/">9</a>
<a class="next" href="http://moviesfox.ru/page/3/"></a>
</nav>

@nedopiv · 04.06.2016, 15:23 **[ТС]**

Не получилось!!

@mrtoxas · 04.06.2016, 15:24

А что именно не получилось? Навигация по центру, цифры по центру

@nedopiv · 04.06.2016, 15:30 **[ТС]**

Спасибо! Все получилось!! Допустил ошибку при копировании

@mrtoxas · 04.06.2016, 15:39

Три точки в <span class="dots"> можно не писать, они через css добавляются. Иначе потом 6 точек будет.

Добавлено через 2 минуты
И убрал класс page-numbers у кнопок лево\право. Так что, c html тоже внимательней

Новые блоги и статьи Все статьи Все блоги /
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .

@nedopiv 0 / 0 / 0 Регистрация: 31.05.2016 Сообщений: 3
	04.06.2016, 15:23 [ТС]
	Не получилось!! 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	04.06.2016, 15:24
	А что именно не получилось? Навигация по центру, цифры по центру 0

@nedopiv 0 / 0 / 0 Регистрация: 31.05.2016 Сообщений: 3
	04.06.2016, 15:30 [ТС]
	Спасибо! Все получилось!! Допустил ошибку при копировании 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	04.06.2016, 15:39
	Три точки в <span class="dots"> можно не писать, они через css добавляются. Иначе потом 6 точек будет. Добавлено через 2 минуты И убрал класс page-numbers у кнопок лево\право. Так что, c html тоже внимательней 0

Как выровнять по центру цифры в постраничной навигации на сайте?

Решение