在图像的中间对齐文本？

Question

I have a table column like this, where I want to align an image and a text. The text must be in the middle of the image.

<td><img height='50px' src='blabla'>Hello</td>

The above aligns the text at the bottom of the image.

I have also tried adding vertical-align:middle to the td style property, without luck.

I have also tried adding a <font> and styling that to vertical-align:middle without luck.

I know of one way, and that is adding another table column and having the text and image in separate columns, then it would be possible to align the text vertically in the middle, but I am trying to avoid this.

Any ideas?

Answer 1

You have to add the vertical-align to the img, not the td :

<td>
  <img style="vertical-align: middle;" src="test.jpg"/>
  test
</td>

To apply the style to all images in td s, use an external CSS:

td img {
  vertical-align: middle;
}

Answer 2

Have you tried using valign="middle"

<td valign="middle"><img height='50px' src='blabla'>Hello</td>

Also, no need to add "px" to the height of the img.

Answer 3

Here you go:

<table>
<tr>
<td><img height='50' width='50' src='http://www.google.com/images/logos/ps_logo2.png' style='vertical-align:middle;">Hello</td>
</tr>
</table>

http://jsfiddle.net/FDRy8/

Answer 4

use vertical-align:middle on the image and not the td

td img{
vertical-align:middle;
}

working example at http://www.jsfiddle.net/gaby/pPVtH/

Answer 5

也向行添加垂直对齐，而不仅仅是单元格。