text-align:center;が効かない

Question

<div class="pageMove">
	<ul>
		<li>１</li>
		<li>２</li>
		<li>３</li>
		<li>４</li>
	</ul>
</div>

.pageMove ul {
	list-style-type:none;
	overflow:hidden;
	background-color:#CCCCCC;
	padding:0;
	width:50%;
	margin:0 auto;
	text-align:center;
}
.pageMove ul li {
	float:left;
	border:solid 1px #000000;
	padding:10px 15px;
	margin-right:10px;
	border-radius:50%;
}

【質問】
ホームページの画面遷移によく使われてる、
「⇐前へ　　①　②　③　④　　次へ⇒」
みたいなのを作りたいと考えているのですが、
↑のコードだと、text-align:center;が効かず、数字が真ん中の左端に来ます。

margin抜きでulをtext-align:centerだけにすると、
数字が左端に来ます。どちらもtext-alignが効いていないようです。
また、ulにdisplay:inline;を付けても結果は同じです。

初歩的で申し訳ないのですが、どこがおかしいかを教えて下さい。

※
text-align:center;はインライン要素に有効。
margin: 0 auto;は、ブロック要素に有効と色んなサイトに書いてるのですが、
CSSで同じセレクタを指定して両方適用させてる例も上がっており、
おかしくないか？と思いつつも取り入れて失敗してる状況です。

Answer 1

.pageMove ul li {
    /*float:left;*/
    display: inline-block;/*ADD*/
    border:solid 1px #000000;
    padding:10px 15px;
    margin-right:10px;
    border-radius:50%;
}

```**動くサンプル：**[https://jsfiddle.net/ow4u2s91/](https://jsfiddle.net/ow4u2s91/)

Comments

[sakuman0]

回答ありがとうございます。
やりたいことが実現できました！