垂直居中CSS Sprite和文本

Question

我正在開發一個網站內的簡單導航元素，並試圖使用精靈頁面將圖像添加到「最後」和「下一步」文本按鈕。我可以讓它們全部正確顯示，但文本不會在這些元素上垂直居中。任何人有任何建議？

<div class="post_nav"> 
    <div class="last">Last</div> 
    <div class="home">&nbsp;</div> 
    <div class="next">Next</div> 
</div> 


.post_nav { position: relative; width: 30%; margin: 10px auto; text-align: center; font-family: 'Bitter', Georgia, serif; font-weight: 700; color: #c9c9c9; } 
.post_nav div { display: inline-block; text-transform: uppercase; padding: 0 20px; } 
.post_nav .last:before { content: ""; width: 30px; height: 30px; line-height: 20px ; background: url('http://i.imgur.com/BlY1jqF.png') no-repeat -60px 0; float: left; margin: auto 5px; overflow: hidden; } 
.post_nav .home:before { content: ""; width: 30px; height: 30px; line-height: 30px ; background: url('http://i.imgur.com/BlY1jqF.png') no-repeat -120px 0; float: left; margin: auto 5px; padding: 0; overflow: hidden; } 
.post_nav .next:after { content: ""; width: 30px; height: 30px; line-height: 30px ; background: url('http://i.imgur.com/BlY1jqF.png') no-repeat -90px 0; float: right; margin: auto 5px; overflow: hidden; } 

Here's the Fiddle for this issue.

Answer 1

不上浮的pseudo-elements，使他們inline-block然後垂直對齊它們。

此外，CSS是相當重複的，你可以簡化很多。

.post_nav { 
 
    position: relative; 
 
    width: 100%; 
 
    margin: 10px auto; 
 
    text-align: center; 
 
    font-family: 'Bitter', Georgia, serif; 
 
    font-weight: 700; 
 
    color: #c9c9c9; 
 
} 
 
.post_nav div { 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
    padding: 0 20px; 
 
} 
 
.post_nav div::before, 
 
.post_nav div::after { 
 
    content: ""; 
 
    width: 30px; 
 
    height: 30px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 0 5px; 
 
    overflow: hidden; 
 
} 
 
.post_nav .last::before { 
 
    background: url('http://i.imgur.com/BlY1jqF.png') no-repeat -60px 0; 
 
} 
 
.post_nav .home::before { 
 
    background: url('http://i.imgur.com/BlY1jqF.png') no-repeat -120px 0; 
 
} 
 
.post_nav .next::after { 
 
    background: url('http://i.imgur.com/BlY1jqF.png') no-repeat -90px 0; 
 
}

<div class="post_nav"> 
 
    <div class="last">Last</div> 
 
    <div class="home">&nbsp;</div> 
 
    <div class="next">Next</div> 
 
</div>

Answer 2

檢查這個fiddle，我認爲這是你在找什麼

添加CSS

.post_nav div {line-height: 30px;}