Как сделать, чтобы картинка была по центру строчного блока?

Question

[DTX]

Comments

[DTX]

Если я правильно понимаю, то оранжевыми должны быть маргины c, но вчера чет не получилось.

[DTX]

Что-то я ничего не понимаю..
https://jsfiddle.net/DTX_/3mt4yjfc/2/

Answer 1

[Александр Рогачев]

Это, что за головоломка (я про картинку)? :D
Вообще когда все элементы inline ставишь им всем vertical-align:middle и получаешь то что надо.
Если же эти элементы inline-block и! у них заданна высота (а картинка находится внутри центрального элемента, как я понял из этого ребуса), то тут немного труднее но гугл на этот счет выдает кучу вариантов, какой лучше решать только тебе - https://www.google.ru/search?q=вертикальное+центри...

Comments

[DTX]

чет не то:
https://jsfiddle.net/3mt4yjfc/

[DTX]

Заодно мб кто подскажет, почему после пустого span нет пробела?

[Александр Рогачев]

DTX: в данном случае font-size играет роль hight'a, когда вернусь за комп попробую состяпать рабочий вариант

[Александр Рогачев]

Это если бы картинку не оборачивал отдельный спан - 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/ это кстати то, что советовал грейтраш, но в его случае нужно знать (чтобы он была заданна) высоту внутреннего эллемента.

[Александр Рогачев]

DTX: "Заодно мб кто подскажет, почему после пустого span нет пробела?" потому что в самом спане ничего нет.

[DTX]

Александр Рогачев: Спасибо огромное! Вариант без оборачиваемого span'а меня полностью устраивает)
С before чет жесткач какой-то.. height или min-height задавать ну никак не охото.. Но копилочку знаний пополнил)

[Александр Рогачев]

DTX: да вариант с .vamfix это для более сложных конструкции, когда уже простым vertical-align:middle не обойдешься, рад что помог

Answer 2

[GreatRash]

Вертикальное выравнивание в строке.

Comments

[DTX]

За ссылку спасибо, но, опять же, такой способ пробовал: https://jsfiddle.net/3mt4yjfc/
И непонятно, почему под strut есть оранжевая полоска. Разве его низ не должен равняться нижу div'a?
css-live.ru/wp-content/uploads/2012/03/strut3.png

[GreatRash]

DTX: vertical-align: middle; выравнивает относительно воображаемой полосы, проведённой через строчную букву x.


codepen.io/GreatRash/pen/ONoQQx

Отсюда непонимание. 90% дизайнеров (и многие верстальщики) нихрена не понимают в типографике (sic!) и потому уверены, что элементы в строке выравниваются посередине строки. Как я показал выше - это не так.

[DTX]

GreatRash: ещё раз спасибо.
Так в вопросе я и предложил использовать маргины, но пока не пойму как)

[GreatRash]

DTX: Лучше использовать position: relative; с отрицательным top. Причём задавать его лучше в em, чтобы не зависеть от размера шрифта. Или например задать line-height в тех же em (в этом случае оно будет считаться как отступ от базовой линии):

codepen.io/GreatRash/pen/pyOLJm (значение подобрал опытным путём)