Как выровнять по центру блок span со спрайтом с разним размером картинок?

Question

[Bobull]

Есть код:

<ul>
  <li><span class="item1"></span></li>
  <li><span class="item2"></span></li>
  <li><span class="item3"></span></li>
</ul>

scss

ul {
  li {
    background: #262626;
    width: 109px;
    height: 109px;
    margin-left: 20px;
    list-style: none;
    border-radius: 50%;
    float: left;
    span {
     &.item1 {
       &:after {
          content: "";
          background: transparent url('https://s11.postimg.org/rrxo3gsz7/sprite_test.png') 0 0 no-repeat;
          width: 70px;
          height: 52px;
          display: inline-block;
        }
      }
       &.item2 {
       &:after {
          content: "";
          background: transparent url('https://s11.postimg.org/rrxo3gsz7/sprite_test.png') -70px -8px no-repeat;
          width: 23px;
          height: 32px;
          display: inline-block;
        }
      }
      &.item3 {
       &:after {
          content: "";
          background: transparent url('https://s11.postimg.org/rrxo3gsz7/sprite_test.png') -93px 0 no-repeat;
          width: 52px;
          height: 52px;
          display: inline-block;
        }
      }
    }
  }
}

https://jsfiddle.net/0s6u1b3b/

Нужно выровнять по цетру блок span с картинкой по отношению li:


Можно margin или position: absolute (), но если в нас будет много картинок в sprite нужно будет кожному :after задавать параметры... а это напряжно :)

Answer 1

[Ivan Bogachev]

В случае с вашим спрайтом можно использовать такую штуку у span и не думать об их расположении:

position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

Comments

[Bobull]

Вы проверали у себя? У меня не работает :(

[Ivan Bogachev]

Bobull: Проверял, работает (разумеется у li должно быть position: relative - но это вроде бы и так очевидно)