html - 将 ul 居中在 div 中

Question

我正在努力获得一个<ul> 包含以它的 parent 为中心的分页链接div。我不确定 a<ul>是否是处理此问题的最佳方法，但这是我能想到的在其中水平显示链接的唯一方法<div class="pagination">（浮动似乎不起作用。）。

html/php

<div class="pagination">    
        <ul>
            <li><?php previous_post_link('<span class="left-arrow"></span> older posts'); ?></li>
            <li><?php next_post_link('<span class="right-arrow"></span> newer posts'); ?></li>
        </ul>            
    </div><!-- end pagination -->

css

#blog .pagination {
    background: url('img/arrow_left.png') no-repeat;
    height: 169px;
    width: 635px;
    float: right;
    margin-right: 14px;
    padding-bottom: 20px;
}

#blog .pagination ul li {
    display: inline;
    margin: 0 auto;
    width: 290px;
}

#blog .pagination .left-arrow {
    float: left;
    background: url('arrow_left.png') no-repeat;
}

#blog .pagination .right-arrow {
    padding-left: 50px;
    background: url('arrow_right.png') no-repeat;
}

现场直播

Answer 1

 .pagination {
    width: 500px;
    background:#eee;
    text-align:center;   
 }

 .pagination ul { 
    display:inline;
    margin: 0 auto;
 }

 .pagination ul li {
    display: inline;
    margin:5px;
 }

Answer 2

做就是了

#blog .pagination ul{
width:100%;
display:block;
text-align:center;
}
#blog .pagination ul li{

display:inline-block;
width:auto;/* to clean you style*/
}

我已经检查过了，它可以在你的网站上运行

编辑：我忘记了箭头

#blog .pagination .left-arrow {
    background: url("arrow_left.png") no-repeat scroll right center transparent;
    float: left;
    padding: 10px 25px;
}
#blog .pagination .right-arrow {
    background: url("arrow_right.png") no-repeat scroll 0 0 transparent;
    float: right;
    padding: 10px 25px;
}