html - 麻烦设计 li 和 span - margin/padding/positioning

Question

我在 div 内的 div 中设置了主题的分页链接。理想情况下，分页链接 div 应垂直和水平居中，li 元素应与 span 元素水平对齐。我的问题是，无论我做什么，这些元素都不会改变。我有点困惑，并且确定我忽略了一些东西..只是不确定它是什么。

live site

<div class="pagination">    
        <ul>
            <li><?php previous_post_link('<span class="left-arrow"></span>&nbsp;OLDER POSTS'); ?></li>
            <li><?php next_post_link('NEWER POSTS&nbsp;&nbsp;&nbsp;&nbsp;<span class="right-arrow"></span>'); ?></li>
        </ul>            
    </div><!-- end pagination -->

#blog .pagination {
    background: url('img/dots_large.png') no-repeat;
    height: 169px;
    width: 635px;
    margin-right: 14px;
    padding-bottom: 20px;
    text-align:center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 70%;
    color: #333333;
    line-height: 2;
}

#blog .pagination ul { 
    background: #fff;
    display:inline;
    padding: 15px;
}

#blog .pagination ul li {
    display: inline;
}

#blog .pagination .left-arrow {
    padding-right: 40px;
}

#blog .pagination .right-arrow {
    padding-left: 40px;
}

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

#blog .pagination span.right-arrow {
    background: url('img/arrow_right.png') no-repeat;
}

Answer 1

改变这些

#blog .pagination ul { 
    background: #fff;
    display:inline-block;
    padding: 15px;
    margin-top: 60px;
}
#blog .pagination ul li {
    display: inline-block;
}

应该这样做