trouble styling li and span - margin / padding / positioning

问题

I have my theme's pagination links set in a div within a div. Ideally, the pagination link div should be centered both vertically and horizontally, and the li elements should align horizontally with the span elements. My problem is, none of those elements will budge regardless of what I do. I'm a little confused, and certain I'm overlooking something.. just not sure what it is.

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

回答1:

change these

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

that should do it

回答2:

Here is one option:

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

As noted, though, you MUST include a doctype at the top of your pages. E.g. add this to the very top of your templates:

<!DOCTYPE html>

来源：https://stackoverflow.com/questions/16950675/trouble-styling-li-and-span-margin-padding-positioning

标签

html

css

position

margin

padding