[HTML/CSS] ul元素居中处理

CSS:

        <style type="text/css">

            #nav_sub_page {
                text-align: center;
                width: 80%;
            }

            #nav_sub_page ul {
                display: inline-block;
                margin: 10px 20px;
                padding: 0px;
            }

            #nav_sub_page ul li {
                display: inline;
            }

            #nav_sub_page ul li a {
                display: inline-block;
                width: 25px;
                height: 25px;
            }

        </style>

HTML:

<div id="nav_sub_page">
    <a id="sub_prev" href="#">&lt;&lt;上一页</a>
    <ul>
        <li>
            <a href="#/1" class="active">1</a>
        </li>
        <li>
            <a href="#/2">2</a>
        </li>
    </ul><a id="sub_next" href="#">下一页&gt;&gt;</a>
</div>

效果:

.