views:

48

answers:

3

I've two elements in <td> a <div> and some text. I would like to align <div> to top and text to middle of <td> How can I do that?

Edit: The should be vertically top aligned and not text inside div.

A: 

Like this?

<html>
<body>
    <table width="100%" height="100%" border="1">
        <tr>
            <td><div style="text-align: center;">some text</div></td>
        </tr>
    </table>
</body>
</html>

...Or

<html>
<body>
    <table width="100%" height="100%" border="1">
        <tr>
            <td align="center"><div style="text-align: left;">div text</div>some text</td>
        </tr>
    </table>
</body>
</html>

Remember to set the body height so you can see the vertical centering

Gary Green
Vertical alignment! and text is outside that div.
Mayur
By default text is aligned vertically in a table, no need for the `valign="center"` but add it if you like by all means :)
Gary Green
A: 

by default any text in a table is vertical alligned, not sure why you need a div there. Its very difficult to get content to allign vertically inside a div

Vinay B R
+1  A: 

try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">

        html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
        body { font:normal 62.5% tahoma }

        .my-table  { height:300px }
        .my-cell { position:relative; border:1px solid green }
        .my-div { position:absolute; top:0; left:0; border:1px solid red }

    </style>
</head>
<body>

    <table class="my-table">
        <tr>
            <td class="my-cell" align="center">

                <div class="my-div">
                    I'm aligned to the top
                </div>

                This text is vertically centered.

            </td>
        </tr>
    </table>

</body>
</html>
Moin Zaman