[CSS]让ul中的li在所属div内成一行居中显示。

先上效果图：
再上代码：
<!DOCTYPE html>
<html lang="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
     <title>ul中li居中示例</title>
     <style type="text/css">
        .pagationDiv{
            border:1px solid red; /*加此边框以便于看清ul的位置*/
        }
        .pagationDiv ul{
            list-style:none;
            margin: 0 auto;      /*让ul在div中水平居中 */
            padding:0;
            text-align:center;   /*让li在ul中水平居中*/
        }
        .pagationDiv ul li{
            display:inline-block;
            height:30px;
            line-height:30px;
            margin-right:10px;
        }
        .pagationDiv ul li a{
            border:1px solid teal;
            padding-left:5px;
            padding-right:5px;
            text-decoration: none;
        }
        .pagationDiv ul li a.noborder{
            border:0px solid blue;
        }
        .pagationDiv ul li a:hover{
            background:navy;
            color:white;
        }
    </style>
    </head>

     <body>
        <div id="list5pagationDiv" class="pagationDiv">
            <ul>
                <li><a id="prevPageLink" href="#">上一页</a></li>
                <li><a id="fisrtPageLink" href="#">first</a></li>
                <li><a id="prevDotsLink" href="javascript:void();" class="noborder">...</a></li>
                
                <li><a id="page1Link" href="#">1</a></li>
                <li><a id="page2Link" href="#">2</a></li>
                <li><a id="page3Link" href="#">3</a></li>
                <li><a id="page4Link" href="#">4</a></li>
                <li><a id="page5Link" href="#">5</a></li>
                <li><a id="page6Link" href="#">6</a></li>
                <li><a id="page7Link" href="#">7</a></li>
                <li><a id="page8Link" href="#">8</a></li>
                <li><a id="page9Link" href="#">9</a></li>
                
                <li><a id="nextDotsLink" href="javascript:void();" class="noborder">...</a></li>
                <li><a id="lastPageLink" href="#">last</a></li>
                <li><a id="nextPageLink" href="#">下一页</a></li>
            </ul>
        </div>
     </body>
</html>
<script type="text/javascript">
<!--
    // 脚本
//-->
</script>
END
PS：话说Editplus3真是一款好编辑器，现在流行的都没有直接查看HTML功能了。