?
Solved

style the td content

Posted on 2014-02-05
9
Medium Priority
?
251 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
9 Comments
 
LVL 53

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 53

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
7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

 
LVL 19

Author Comment

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

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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 53

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

Introducing Priority Question

Increase expert visibility of your issues by participating in Priority Question, our latest feature for Premium and Team Account holders. Adjust the priority of your question to get emergent issues in front of subject-matter experts for help when you need it most.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

771 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