Vertical Alignment of inner elements

Question

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.

Answer 1

try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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>

Answer 2

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

Answer 3

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

Vertical Alignment of inner elements

Question

3 answers

solution1
1 2010-09-08 07:26:59

solution2
0 ACCPTED 2010-09-08 07:21:01

solution3
0 2010-09-08 07:25:27

Vertical Alignment of inner elements

Question

3 answers

solution1 1 2010-09-08 07:26:59

solution2 0 ACCPTED 2010-09-08 07:21:01

solution3 0 2010-09-08 07:25:27

solution1
1 2010-09-08 07:26:59

solution2
0 ACCPTED 2010-09-08 07:21:01

solution3
0 2010-09-08 07:25:27