Text at the bottom of the range

Question

I have something like this

<td> <a href="#"> <span class="foo"> Link Text </span> </a> </td> 

and I

 .foo { height: 90px; display: inline-block; background: #e8edff url('foo.png') top center no-repeat; vertical-align: bottom; } 

and he does something like this (with background image)

  ________________ | Link Text | | | | | | | | | |________________| 

How can I make this happen?

  ________________ | | | | | | | | | Link Text | |________________| 

The requirement is that each cell must have a hyperlink, background image and some text at the bottom.

thanks

EDIT: here is the jsfiddle link of what I'm trying to do.

Answer 1

give vertical-align: bottom; in TD instead of span

EDIT: write like this

 .foo { height: 50px; background: #e8edff url('http://www.emblemmart.com/emblems-badges-insignias/media/logos/medium/BMW.gif') top center no-repeat; display:table-cell; vertical-align:bottom; } 

check out http://jsfiddle.net/sandeep/yBKZS/1/

Answer 2

Put vertical-align: bottom; in TD not SPAN .

vertical-align will not do what you want, except in two cases: on a table element or on (or next to) an image. See: http://phrogz.net/css/vertical-align/index.html

Answer 3

add this to the td <td valign="bottom">

UPDATE

Here is what you are looking for:

http://jsfiddle.net/yBKZS/3/

UPDATE 2

If you do not need an image for the background, you can do something like this:

http://jsfiddle.net/yBKZS/8/