?
Solved

aligning text in a table cell

Posted on 2006-04-23
9
Medium Priority
?
333 Views
Last Modified: 2010-04-09
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
0
Comment
Question by:minnirok
9 Comments
 
LVL 65

Expert Comment

by:SheharyaarSaahil
ID: 16522260
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
 
LVL 18

Expert Comment

by:Eternal_Student
ID: 16522964
Or use css:

text-align:center;
vertical-align: middle;
0
 
LVL 7

Author Comment

by:minnirok
ID: 16525861
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 65

Expert Comment

by:SheharyaarSaahil
ID: 16526142
can you upload this page somewhere on the internet?
0
 
LVL 7

Author Comment

by:minnirok
ID: 16526274
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
 
LVL 12

Expert Comment

by:jessegivy
ID: 16526426
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
 
LVL 7

Author Comment

by:minnirok
ID: 16526718
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
 
LVL 3

Accepted Solution

by:
nifmcm earned 1000 total points
ID: 16529322
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
 
LVL 7

Author Comment

by:minnirok
ID: 16530990
that's it nifmcm, thanks
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question