Как выровнять текст по центру изображения в HTML?

Question

Итак, у меня есть изображение «blah.jpg» и имя «Имя» в HTML.

    <img src="blah.jpg"> Name

Я хочу сделать так, чтобы имя выравнивалось по центру с центром изображения blah.jpg вместо текста «Имя» с базовой линией внизу изображения.

Каков наилучший способ сделать это без таблиц, использующих CSS3, если это возможно?

Answer 1

На странице:

<img src="blah.jpg" class="centered"> Name

В файле css:

img.centered {vertical-align:middle;}

Нет необходимости в отображении: встроенный блок (который не поддерживается в некоторых старых браузерах)

Answer 2

Вы можете использовать вертикальное выравнивание: середина вашего элемента img: http://jsfiddle.net/Z35pw/.

Answer 3

Если вам нужен однострочник, без определения дополнительных объектов или атрибутов, просто добавьте style="vertical-align:middle" внутри тега <img .../>.