Это, что за головоломка (я про картинку)? :D
Вообще когда все элементы inline ставишь им всем vertical-align:middle и получаешь то что надо.
Если же эти элементы inline-block и! у них заданна высота (а картинка находится внутри центрального элемента, как я понял из этого ребуса), то тут немного труднее но гугл на этот счет выдает кучу вариантов, какой лучше решать только тебе - https://www.google.ru/search?q=вертикальное+центри...
Это если бы картинку не оборачивал отдельный спан - https://jsfiddle.net/3mt4yjfc/4/
Весь смысл тут в том, что если элементы стоят на одном уровне (т.е. являются друг другу братьями) то через vertical-align:middle найдется самый большой и остальные выстроятся по нему.
В твоем же примере картинка является потомком спана, и она не может выстраиваться также как я описал выше, и тут надо уже придумывать как ей помочь.
Опять же если бы картинка была больше спана, она его бы растянула и другие спаны ориентировались по нему - https://jsfiddle.net/3mt4yjfc/5/
А вот пример как все сделать как тебе надо - https://jsfiddle.net/3mt4yjfc/6/
Здесь я использовал класс .vamfix который использую для вот таких выравниванний, там написано много хотя, весь смысл в том что:
1. У родительского элемента должен быть height или min-height
2. Создается псевдо-эллемент ::before у которого высота 100% (т.е. сколько у родителя столько и у него)
3. Псевдо-эллементу и другому внутреннему (например картинка) дается vertical-align:middle.
4. Так как псевдо-эллемент и другой элемент (картинка) являются братьями, а псевдо-эллемент имеет бОльшую величину, то картинка позиционируется по вериткальному центру.
Надеюсь более менее понятно объяснил.
https://jsfiddle.net/3mt4yjfc/7/ это кстати то, что советовал грейтраш, но в его случае нужно знать (чтобы он была заданна) высоту внутреннего эллемента.
Александр Рогачев: Спасибо огромное! Вариант без оборачиваемого span'а меня полностью устраивает)
С before чет жесткач какой-то.. height или min-height задавать ну никак не охото.. Но копилочку знаний пополнил)
Отсюда непонимание. 90% дизайнеров (и многие верстальщики) нихрена не понимают в типографике (sic!) и потому уверены, что элементы в строке выравниваются посередине строки. Как я показал выше - это не так.
DTX: Лучше использовать position: relative; с отрицательным top. Причём задавать его лучше в em, чтобы не зависеть от размера шрифта. Или например задать line-height в тех же em (в этом случае оно будет считаться как отступ от базовой линии):
