aligning text in a table cell

Hi,

In a table cell, how can I left align text horiztonally, but center it vertically?

<TABLE width = "100%" border="0" cellpadding="0" cellspacing="0">
    <TR><TD align="left" width = "100%" >hello</TD></TR>
</TABLE>

can someone please show me how to fix it in the above sample?

Thanks
LVL 7
minnirokAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

SheharyaarSaahilCommented:
add valign tag, like this,

<TABLE width = "100%" border="0" cellpadding="0" cellspacing="0">
    <TR><TD valign ="middle" width = "100%" ><div align="center">hello</TD></TR>
</TABLE>
Eternal_StudentCommented:
Or use css:

text-align:center;
vertical-align: middle;
minnirokAuthor Commented:
Hi,

It doesn't seem to be working, I'm sorry I forgot one important part of my table definition which is probably causing the problem, each row in the table has a little icon in it:

<TABLE width = "100%" border="0" cellpadding="0" cellspacing="0">
    <TR><TD align="left" width = "100%" ><img src='icon.gif'>hello</TD></TR>
</TABLE>

so I tried putting in your suggestions SheharyaarSaahil like:

<TABLE width = "100%" border="0" cellpadding="0" cellspacing="0">
    <TR><TD valign="middle" width = "100%" ><img src='icon.gif'><div align = "center">hello</TD></TR>
</TABLE>

but it made each row of the table really tall, the icon is at the upper left corner of each row, the text at the center bottom of each row, it looks like:

------------------------------
| gif |                            |
|------      hello               |
|----------------------------|

but I need:

------------------------------
| gif |  hello                   |
|----------------------------|

Thanks
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

SheharyaarSaahilCommented:
can you upload this page somewhere on the internet?
minnirokAuthor Commented:
Hi,

I can't upload it anywhere, but here is a full example you can copy into a local html file (it should run fine if you just copy and paste): The div that has 'hello' in it is what needs the formatting,

Thanks


<html>
<body>


<div id = "parent_div" style = "position:absolute; width:100px; height:100px; left:200px; top:85px; font-size:12px; font-family:arial; border:1px solid black; background-color:white;">
               

     <div id = "child_div" style = "position:absolute; width:100px; left:100px; top:-1px; font-size:12px; font-family:arial; border:1px solid black; background-color:white;">
         <TABLE width = "100%" border="0" cellpadding="0" cellspacing="0">
             <TR><TD valign="middle" width = "100%" height = "100%"><img src='img/icon/qm.gif' height='16px' width='16px'><div align="center">hello</TD></TR>
         </TABLE>
     </div>
</div>

</body>
</html>
jessegivyDeveloperCommented:
How about just adding another cell for the icon?

<html>
<body>


<div id = "parent_div" style = "position:absolute; width:100px; height:100px; left:200px; top:85px; font-size:12px; font-family:arial; border:1px solid black; background-color:white;">
               

     <div id = "child_div" style = "position:absolute; width:100px; left:100px; top:-1px; font-size:12px; font-family:arial; border:1px solid black; background-color:white;">
         <TABLE width = "100%" border="0" cellpadding="0" cellspacing="0">
             <TR>
                 <TD valign="middle" width = "100%" height = "100%">
                    <img src='img/icon/qm.gif' height='16px' width='16px'>
                 </TD>
                 <TD valign="middle" width = "100%" height = "100%">
                    hello
                 </TD>
             </TR>
         </TABLE>
     </div>
</div>

</body>
</html>

...I also noticed that there was an unterminated div tag with align="center" in your table cell.  That could be causing much problems, as div is block level element and will cause a line break, the text should appear next to the icon if you remove but ya may want an extra cell anyway.

Cheers,

Jesse
minnirokAuthor Commented:
Hi Jesse,

I tried your example, looks a lot better, but 'hello' seems to be right justified - can it be placed directly beside the icon on the left?

Thanks
nifmcmCommented:
doesn't this work?
<TABLE width = "100%" border="0" cellpadding="0" cellspacing="0">
    <TR>
        <TD valign="middle" width = "x"><!--- where x is the width of the img ---><img src='icon.gif'></TD>
        <TD valign="middle">hello</TD>
    </TR>
</TABLE>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
minnirokAuthor Commented:
that's it nifmcm, thanks
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.