Как выровнять по вертикали до x-height?

Question

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

vertical-align: middle; 

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

Центр вертикального выравнивания.

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

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

фон: URL (bg_image.jpg) не повторять слева от центра;