How to vertical align text with center of image in HTML?

Question

So I have an image "blah.jpg" and a name "Name" in HTML.

    <img src="blah.jpg"> Name

I want to make it so that the Name is center aligned with the center of the blah.jpg image instead of the text "Name" having a baseline at the bottom of the image.

What is the best way to accomplish this with no tables using CSS3 if possible?

Answer 1

In the page:

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

In css file:

img.centered {vertical-align:middle;}

No need for display: inline-block (which is not supported in some old browsers)

Answer 2

您可以在img元素上使用vertical-align：middle： http : //jsfiddle.net/Z35pw/ 。

Answer 3

如果您想要单行而不定义额外的对象或属性，只需在<img .../>标记内添加style="vertical-align:middle" 。