Hi Guys.

 

Right so i'm haveing a few problems with centering text under images in a html table. I've tried all the obvious ones.. center and tabel align and such. Still i get nothing or it moves to right of the cell. The images have a solid border.. is there anything else i can do. Code is below.

 

    <table border="0" bordercolor="#FFffff" style="background-color:none" width="500" cellpadding="0"  table align="center" cellspacing="0"> 
<tr>
	<td><a href="moving-home-company-colchester-essex.html"><img style="border:9px solid #545565;" src="images/moving.jpg" width="125" height="115" alt="Moving home information." /></a><br><b> Moving Home </b></br></td>
	<td><a href="removal-van-driver-hire-colchester-essex.html"><img style="border:9px solid #545565; " src="images/vandriver.jpg" width="125" height="115" alt="Van and driver hire." /></a><br> Van and Driver Hire</br></td>
	<td><a href="leaflet-distrabution-essex-colchester.html"><img style="border:9px solid #545565;" src="images/leaflet-distribution-colchester-essex-area.jpg" width="125" height="115" alt="leaflet distribution colchester essex area" /></a><br><b>  Leaflet Distribution</b></br></td>
</tr>
<tr>
	<td><a href="removals-company-colchester-essex.html"><img style="border:9px solid #545565;" src="images/removal-service-colchester-essex.jpg" width="125" height="115" alt="removal service in colchester and essex" /></a><br><b>Removals </b></br></td>
	<td><a href="delivery-company-colchester-essex.html"><img style="none;" src="images/moving-dove.gif" width="125" height="115" alt="Moving home information." /></a></td>
	<td><a href="storage-solutions-colchester-essex.html"><img style="border:9px solid #545565;" src="images/Storage-solutions-colchester-essex.jpg" width="125" height="115" alt="Storage solutions in colchester and essex.jpg" /></a><br><b>Storage Solutions  </b></br></td>
</tr>
<tr>
	<td><a href="moving-home-boxes-colchester-essex.html"><img style="border:9px solid #545565;" src="images/removal-boxes-colchester-essex.jpg" width="125" height="115" alt="moving home boxes in colchester and essex.html" /></a><br><b>  Packaging</b></br></td>
	<td><a href="delivery-company-colchester-essex.html"><img style="border:9px solid #545565;" src="images/delivery-company-colchester-essex.jpg" width="125" height="115" alt="delivery company in colchester and essex.html" /></a><br><b>  Delivery</b></br></td>
	<td><a href="contact.html"><img style="border:9px solid #545565;" src="images/contact.jpg" width="125" height="115" alt="Contact Us Link" /></a><br><b>  Contact Us</b></br></td>
</tr>
</table>

 

I have removed all the center coding i did.. i've tried </center> both at the start of the and on each individual <td>

 

Some help would be great, thank you all!!

Here's one solution, I've tested only with one td tag:-

CSS

img { display: block; margin: auto; border: 9px solid #545565; }
.center { text-align: center; }

HTML

<td style="background: #ddd;"><a 
href="moving-home-company-colchester-essex.html"><img 
src="images/moving.jpg" width="125" height="115" 
alt="Moving home information." /></a><p 
class="center"><b>Moving Home </b></p></td>

The td background is temporary just to see if the image and text are centered. The class .center makes the p tag below the image the same width as the td and centered text.

 

Also, the text length must not exceed the width of the image above.

Edited March 1, 201214 yr by Wickham

I see you are adding keywords within your page names, would you consider using DIV tags instead, they look a lot less messy and your keywords will have a little bit more strength:

 

e.g.

 

 

 

 <div class="MyTable">

   <div class="MyItem">
     <img src="blablabla.jpg" alt="bla bla" /><br />
     Text under image
   </div>

   <div class="MyItem">
     <img src="blablabla.jpg" alt="bla bla" /><br />
     Text under image
   </div>

   <div class="MyItem">
     <img src="blablabla.jpg" alt="bla bla" /><br />
     Text under image
   </div>

   <div class="MyItem">
     <img src="blablabla.jpg" alt="bla bla" /><br />
     Text under image
   </div>

   <div class="MyItem">
     <img src="blablabla.jpg" alt="bla bla" /><br />
     Text under image
   </div>

   <div class="MyItem">
     <img src="blablabla.jpg" alt="bla bla" /><br />
     Text under image
   </div>

 </div>

 

Then in the CSS sheet set the width of the "MyTable" class and the width of the "MyItem" to one third of "MyTable" and just set "text-align:center;" for MyItem (and height, float etc... let me know if you need help with that)

 

This way your styles are out of your html and easier to work with

sorry, one more thing, what happens if you set the align within your <td> (i.e. "<td align="center">IMAGE and text here</td>") that should work, although i would still recommend using DIV tabs instead of Tables.

Here's one solution, I've tested only with one td tag:-

CSS

img { display: block; margin: auto; border: 9px solid #545565; }
.center { text-align: center; }

HTML

<td style="background: #ddd;"><a 
href="moving-home-company-colchester-essex.html"><img 
src="images/moving.jpg" width="125" height="115" 
alt="Moving home information." /></a><p 
class="center"><b>Moving Home </b></p></td>

The td background is temporary just to see if the image and text are centered. The class .center makes the p tag below the image the same width as the td and centered text.

 

Also, the text length must not exceed the width of the image above.

 

Thnaks for your help! Took a while but this worked. Great stuff! (Y) Thanks!

You really shouldn't be using tables for layout.

Yep listen to renaisance design, try to remove the tables and replace with <li> or <div> instead.

 

There are a few examples on my site to see how a <li> works.

 

check <li> examples

Yep listen to renaisance design, try to remove the tables and replace with <li> or <div> instead.

 

There are a few examples on my site to see how a <li> works.

 

check <li> examples

 

I did try using <li> but couldn't structure the <ul>. A table format just seemed the easier option as i required multiple content sections on individual rows.

I did try using <li> but couldn't structure the <ul>. A table format just seemed the easier option as i required multiple content sections on individual rows.

 

Tables are far less easy to work with once you learn how to use CSS properly. Spend the time now otherwise your work will suffer in the future.

Use this it will help you:

<html>

<body>

<table>

<tr>

<td><a href="#"><img src="hello.JPG"/></a><center><p>hello</p></center></td>

</tr>

</table>

</body>

</html>

 

Don't do this ever! ^^^

 

The <center> tag is an abomination and is also depreciated from use.

Don't do this ever! ^^^

 

The <center> tag is an abomination and is also depreciated from use.

 

Shouldn't that be an insta-ban? Doing things really badly yourself is one thing, but giving out really ****ty advice to get to 25 posts?

Edited March 19, 201214 yr by Renaissance-Design

Shouldn't that be an insta-ban? Doing things really badly yourself is one thing, but giving out really ****ty advice to get to 25 posts?

 

Sometimes i like to mess with the system!