• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 253
  • 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 MVEDeveloperCommented:
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 MVEDeveloperCommented:
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
Technology Partners: 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!

 
erikTsomikSystem Architect, CF programmer Author Commented:
it has to vertically aligned
0
 
Scott Fell, EE MVEDeveloperCommented:
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 MVEDeveloperCommented:
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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