垂直居中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;}