Vertically aligning text in the center of table cell

Question

I know that similar problem have been asked and answered previously on this site, but unfortunately none of the answers have been able to help.

I need my text to vertically align in the center/ bottom of my table row. This i my css text:

h3 {
    vertical-align:bottom;
    font-weight: lighter;
    padding-top: 0px;
    background: url(images/bg3.jpg);
    background-repeat: no-repeat;
    background-position:left bottom;}

Answer 1

If your text is single line, than use line-height = height :

h3 {
   height: 30px;
   line-height: 30px;
   display: inline-block;
}

Answer 2

Use align and valign properties in your table cell:

<table width="100%" border="1">
    <tr>
        <td height="300" align="center" valign="middle">
            <h3>Hello World</h3>
        </td>
    </tr>
</table>

jsFiddle Demo .

Answer 3

From your question it seems you want to vertically align to the bottom and horizontally to the center.. if that is true you should do this:

FIDDLE

td    { text-align:center; vertical-align:bottom;}

*Notice the styles need to be on the table cell and not on the inner element (h3)

good luck!