nicothin
@nicothin
веб-разработчик с 2000 г.

CSS: Почему происходит смещение изображения при line-height идентичной высоте блока?

Берем блок с фиксированным размером и даем ему line-height такой же, как высота.
Помещаем внутрь картинку с вертикальным выравниванием посередине.
Наблюдаем смещение картинки вниз.
cssdeck.com/labs/mphyqlfj

Как решить проблему — не вопрос (эмуляция ячейки таблицы на сей момент самый разумный способ), вопрос почему такое происходит.
Ведь, теоретически, середина картинки должна встать ровно на середину линии, а последняя проходит по середине блока.
  • Вопрос задан
  • 3664 просмотра
Решения вопроса 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
Вот так происходит выравнивание изображения — по средней линии.
Для примера был выбран шрифт Times New Roman, размер 80px, наклонный.
Безусловно, большое значение имеют параметры шрифта — aspect ratio (это то, что управляется font-size-adjust) и расстояние для нижних выносных линий.

7c69f929f9f94af0ae376034803f477c.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Matrosked
@Matrosked
senior fron-end developer
потому что в данном случае картинка - инлайновый (а точнее, inline-block) элемент. Величина смещения в данном случае зависит от 2 свойств: размера шрифта и, непосредственно, самого шрифта. Чтобы решить вашу проблему без эмуляции табличного layout'а достаточно задать font-size: 0 обертке.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы