垂直对齐使用CSS背景属性包含的图像与跨度标签

Question

我有一个跨度标签。我使用CSS 在此跨度标签中加载图像。现在，我想垂直将此图像归为跨度标签。我无法将此图像垂直居中，因为我将此图像应用于使用CSS的跨度。在这里，我使用的是图标精灵，并仅从图标刺激中提取相关部分。谁能帮忙？

html

<span class="icon"></span>

CSS

.icon{
   background: url(../images/icon-sprite.png) no-repeat -328px 0;
   width: 60px;
   height: 40px;
   position: absolute; 
}

我尝试在.icon类中添加行高。但是没有欢乐。

Answer 1

您需要更改数字才能为您的图标工作，但这应该可以解决问题。

.icon { 
  position: relative;
  border:1px solid #FF0000;
  white-space: nowrap;
} 
.icon:before{
  content: "";
   position: relative;
   width:15px;
   display:inline-block;
}
.icon:after{
    content: "";
    position: absolute;
    top: 50%;
    left: 0; 
    margin-top: -8.5px;
    width: 15px;
    height: 18px; 
    background: url('https://www.google.com/images/nav_logo127.png') no-repeat -0px -327px;
}

<span class="icon" style="font-size:20px;">whatever</span>
<span class="icon" style="font-size:25px;">whatever</span>
<span class="icon" style="font-size:30px;">whatever</span>
<span class="icon" style="font-size:35px;">whatever</span>
<span class="icon" style="font-size:40px;">whatever</span>
<span class="icon" style="font-size:45px;">whatever</span>

边框和字体大小仅为例如。

Answer 2

可以使用任何人：

.icon{
   background: url(../images/icon-sprite.png) no-repeat;
   background-position:left center;
   width: 60px;
   height: 40px;
   position: absolute; 
}

或

.icon{
   background: url(../images/icon-sprite.png) no-repeat left center;
   width: 60px;
   height: 40px;
   position: absolute; 
}

Answer 3

理想情况下，您应该有一个父级，然后尝试将.icon与父级对齐。

.parent {
  position: relative;
  width: 120px;
  height: 80px;
}
.icon {
  background: url(../images/icon-sprite.png) no-repeat -328px 0;
  width: 60px;
  height: 40px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
}

<div class="parent">
  <span class="icon"></span>
</div>