wordpress ページ送りのcss

Question

###解決したいこと
index.phpにページ送りのコードを追加したのですが、ページナンバーを中央表示にしたいのですが、cssのtext-align:center;が効きません。
両端の矢印は今のまま端っこにしておきたいです。

###index.php

<!------------------------ページ送りここから------------------------------>
<div class="index-pager">
	<?php global $wp_rewrite;
	$paginate_base = get_pagenum_link(1);
	if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
		$paginate_format = '';
		$paginate_base = add_query_arg('paged','%#%');
	}
	else{
		$paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
		user_trailingslashit('page/%#%/','paged');;
		$paginate_base .= '%_%';
	}
	echo paginate_links(array(
		'base' => $paginate_base,
		'format' => $paginate_format,
		'total' => $wp_query->max_num_pages,
		'mid_size' => 5,
		'current' => ($paged ? $paged : 1),
		'prev_text' => '«',
		'next_text' => '»',
	)); ?>
</div><!--/.index-pager-->
<!-------------------------ページ送りここまで----------------------------------->

###htmlソース

<!------------------------ページ送りここから------------------------------>
<div class="index-pager">
	<span class='page-numbers current'>1</span>
<a class='page-numbers' href='http://jikkyo-webdesigner.top/page/2/'>2</a>
<a class='page-numbers' href='http://jikkyo-webdesigner.top/page/3/'>3</a>
<a class="next page-numbers" href="http://jikkyo-webdesigner.top/page/2/">»</a></div><!--/.index-pager-->
<!-------------------------ページ送りここまで----------------------------------->

###css

.index-pager{
	text-align:center;
}

.current{
	color:gray;
	font-size:1rem;
}

a.page-numbers,
.pager .current{
	color:white;
	background:#f2bb05;
	border-radius:5px;
	padding:5px 8px;
	margin:0 2px;
	font-size:1rem;
}

###イメージ

Comments

[gin]

PHPを修正するわけではないので、htmlとして生成されたもののほうがよいかと思います。あとCSSもページャーのレイアウトにかかわるものを掲載してください。

[kei344]

使用されているテーマは自作テーマでしょうか？それとも公開されているテーマでしょうか？後者の場合は入手先をリンクつきで質問文に追記してください。

[kotori_00]

自作テーマです。ページャーのphpとcssのコードはサイトにあったものをコピペして使用しています。

[kei344]

ページャのCSSが足りません。現在書かれているもので画像の状況が再現できません。コピペもとのサイトURLも追記ください。（URLにはリンクを張ることができます）

[kotori_00]

http://techacademy.jp/magazine/7525　　こちらがコピー元です。

[kei344]

リンク先に書かれているものと提示されている画像が違いますよ。「両端の矢印」はどういう記述をされているかが全くわかりません。

[kotori_00]

index.phpを追加しました。もともとリンク先のコピーを使用していたのですが、それでもtext-align:center;が使用できず自分でコード調整したのが上記のものです。

[kei344]

両端の矢印 ← CSSの話です。

[kotori_00]

よく確認したらcss内に別ページで使用している同じセレクタがありfloatが記述してありました。矢印については解決しましたが、中央表示がまだ解決できません。引き続きよろしくお願いします。

Answer 1

こんな感じでどうでしょう。
生成されたものを見ると、divとclassの間に全角スペースがあるので半角スペースに修正してください。
あと閉じタグにも同様のものがついているので削除。classも不要なので削除です。
.index-pagerにはtext-align: center;が指定されているので全角とって効くようになれば真ん中にきます。

<div class="index-pager">
</div class="index-pager">
↓
<div class="index-pager">
</div>

.index-pager:after {
	clear: both;
	display: block;
	content: "";
}
.prev.page-numbers {
	float: left;
}
.next.page-numbers {
	float: right;
}

Comments

[kotori_00]

回答ありがとうございます。
アドバイスいただいた箇所のhtmlコードに変なスペースが入っていたみたいで入力しなおしたら、反映されました！

Answer 2

示されているコードに

a.prev {
	float: left;
}
a.next {
	float: right;
}

を付け足したら、
矢印は両端でページナンバーは中央表示にできましたよ。

他がどうなっているかわからないので、何とも言えませんが
ご自身のページで質問に書かれているCSSのコードがちゃんと効いているか
もう一度確認されてみてはどうですか。

Comments

[kotori_00]

回答ありがとうございます。
無事解決できました。