CSS Sprite 和文本的垂直居中

Question

我正致力于在网站中开发一个简单的导航元素，并尝试使用 sprite 页面将图像添加到 "Last" 和 "Next" 文本按钮。我可以让它们全部正确显示，但文本不会在这些元素上垂直居中。有人有什么建议吗？

<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

检查这个fiddle，我想这就是你要找的

添加CSS

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

Answer 2

不要浮动 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>

CSS Sprite 和文本的垂直居中

Vertical Centering of CSS Sprite and Text

html

css

sprite