Question

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

rdf:RDF

Here's the Fiddle for this issue.

Answer 1

检查这个fiddle，我认为这就是你要找的东西

添加CSS

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

Answer 2

不要浮动pseudo-elements，让它们inline-block，然后垂直对齐它们。

此外，CSS相当重复，你可以简化很多。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS Sprite和Text的垂直居中

2 个答案: