• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 256
  • Last Modified:

style the td content

I am trying to style a table cell, so when I see the content i will have the text in the middle of the cell, however there could be an image then i need to shift the text to the top and image under it.

<table class="tblContent" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class="namePlace">
                                                test name
                                                <div class="textPlaceHolder">
                                                <img src="/includes/images/check.jpg" width="170px;"></cfif>--->
                                                
                                                      <img src="imagePath" width="113" height="113">      
                                                            
                                          </div>
                                          </div>
</td>
</tr>

</table>
0
erikTsomik
Asked:
erikTsomik
  • 4
  • 3
1 Solution
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think you had some of your cf code in there. Just place your text in a div and that will force the image below.  

<table class="tblContent" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class="namePlace">
                                               
                                                <div class="textPlaceHolder">TEXT HERE</div>
                                                <img src="/includes/images/check.jpg" width="170px;">
                                                
                                                      <img src="imagePath" width="113" height="113">      
                                                            
                                          </div>
                                         
</td>
</tr>

</table>

Open in new window

0
 
erikTsomikSystem Architect, CF programmer Author Commented:
but in the case when i do not have an image i need the text to be in the middle of the cell
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Add css

td{text-align:center}

and that will make all td's align their content center (images or text).

Or you can give a td a class

td.centerme{text-align:center}
<td class="centerme">Your content</td>
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
erikTsomikSystem Architect, CF programmer Author Commented:
it has to vertically aligned
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you place each item in a block, they will align center vertically.
http://jsbin.com/ceve/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
<style>
  td{text-align:center;}
  
  </style>
  </head>
  
<body>
  <table class="tblContent" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<div class="namePlace">
                                               
  <div class="textPlaceHolder">TEXT HERE</div>
  <div><img src="/includes/images/check.jpg" width="170px;"></div>
  <div><img src="imagePath" width="113" height="113">  </div>    
</div>
                                         
</td>
</tr>

</table>
</body>
</html>

Open in new window

0
 
erikTsomikSystem Architect, CF programmer Author Commented:
Also forgot to tell you I have dispaly set display: inline-block;
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Erik, if you look at what I did here http:#a39835998 it does exactly what you want.  If you have something set to inline-block and it is not working, then simply remove it.  A div is a block unless you changed it.  If you have the images as inline blocks, that will not matter because my code places them inside of a div.  

If it is still not working, please post a link to your sample page.  If you don't have it live now, please create a sample page you can upload and take out any content you don't want public.

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.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now