Вертикально выравнивать изображение, включенное с использованием свойства фона CSS, в тег Span

Question

У меня есть тег span. Я загружаю изображение внутри этого тега span, используя css. Теперь я хочу вертикально центрировать это изображение внутри тега span. Я не могу вертикально центрировать это изображение, потому что я применяю это изображение для использования 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>