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;
}

应该这样做

Answer 2

这是一个选项：

#blog .pagination ul {
    background: #FFF;
    display: table;
    border-spacing: 15px;
        margin: 0 auto;
}

#blog .pagination ul li {
    display: table-cell;
}

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

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

如上所述，您必须在页面顶部添加doctype。例如。将其添加到模板的最顶部：

<!DOCTYPE html>

麻烦造型李和跨度 - 边距/填充/定位

2 个答案: