Можно ли выровнить картинку по вертикале в псевдоэлементе:before, если картинка задана как content: url('img.png');?

Question

[GM2mars]

Есть такая разметка:
<li>текст в несколько строк</li>
И стиль:

li:before {
  content: url('img.png');
  position: absolute;
  width: 40px;
  margin-left: -40px;
}

Элемент li имеет разную высоту, в зависимости от контента. Нужно чтоб картинка была выровнена по вертикале.
Интересует вариант без использования background.

Видимо нет такой возможности =(

Answer 1

[Valery]

Зачем изобретать велосипед?

li:before {
  content: '';
  position: absolute;
  width: 40px;
  margin-left: -40px;
  background-image: url('img.png');
  background-position: center;
  /* background-repeat: no-repeat; - оционально */
}

Comments

[GM2mars]

В вопросе: "Интересует вариант без использования background."

[Valery]

GM2mars: тогда CSS это не умеет...

Answer 2

[Treal]

попробуй vertical-align: middle;

Comments

[IceJOKER]

+ display: inline-block если не ошибаюсь

[GM2mars]

не работает

Answer 3

[Игорь Пушкарский]

А высота картинки строго определена? Если да то top:50%; margin-top:- половина картинки.

Comments

[GM2mars]

Не будет работать, так как высота (блока) явно не задана, потому что зависит от контента. Он берет за top всю высоту страницы