Как выровнять по вертикальной оси?

Question

У меня есть строка текста и небольшое изображение, которое я пытаюсь выровнять по вертикали в пределах строки.Моя цель состоит в том, чтобы выровнять вертикальный центр изображения по высоте х (или половине высоты заглавной буквы) от базовой линии текста.Я не могу придумать, как это сделать.Самая близкая вещь, о которой я знаю, это:

vertical-align: middle;

Это поведение, как указано в спецификации CSS 2.1:

Совместите вертикальную среднюю точку рамки с базовой линиейродительское поле плюс половина x-высоты родительского элемента

Если бы был способ удалить «половину» мира из этого определения, я бы получил то, что хотел.Как мне это сделать?

Answer 1

Проблема в том, что текст располагается на базовой линии текста, а изображение опускается ниже. И разные браузеры справляются с этим по-разному.

Мое любимое решение - отображать изображение в виде background-image с background-position, установленным на left center ... вы можете приправить по вкусу.

Answer 2

Здесь находится центр выравнивания по вертикали.

http://www.templatespoint.com/blog/2010/10/div-vertical-align-middle/

или используйте изображение в качестве фонового изображения

background: url (bg_image.jpg) без повтора левый центр;

Answer 3

Не знаю, является ли это «лучшим» ответом, но я всегда устанавливал бы «высоту строки» моего текста, чтобы соответствовать высоте того, что я пытаюсь отцентрировать.