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?
 
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>
0
 
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>
0
 
Eternal_StudentCommented:
Or use css:

text-align:center;
vertical-align: middle;
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
0
 
SheharyaarSaahilCommented:
can you upload this page somewhere on the internet?
0
 
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>
0
 
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
0
 
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
0
 
minnirokAuthor Commented:
that's it nifmcm, thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.