CODEWITHSUNDEEP
htmlcssvertical-alignment
Magnus Garl Eldrup
Magnus Garl Eldrup

Reputation: 1

Vertically aligning text in the center of table cell

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;}

Upvotes: 0

Views: 81

Answers (3)

webkit
webkit

Reputation: 3369

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!

Upvotes: 0

Justinas
Justinas

Reputation: 43479

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

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

Upvotes: 3

dashtinejad
dashtinejad

Reputation: 6253

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.

Upvotes: 0

Related Questions