Solved

style the td content

Posted on 2014-02-05
9
245 Views
Last Modified: 2014-03-09
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
Comment
Question by:erikTsomik
  • 4
  • 3
9 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39835757
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 39835873
but in the case when i do not have an image i need the text to be in the middle of the cell
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39835919
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 19

Author Comment

by:erikTsomik
ID: 39835932
it has to vertically aligned
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39835998
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
 
LVL 19

Author Comment

by:erikTsomik
ID: 39836436
Also forgot to tell you I have dispaly set display: inline-block;
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39836515
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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 videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

770 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