Floating Thumbnails images and centering caption

[co.ador]

I know my semantics are not good except for the form, need some help on centering caption and Link to live site

[Kokos]

First of all: you should not be using HTML attributes for your layout.
In order to center captions on an image, you need a parent div that contains both the caption and the image.

Do the following things to make it work:

• Remove the align="left" from all images
• Remove the css margins from the images and captions
• Give the 'a' containing the images and captions a text-align:center;

If you want to have space in between the images, give the parent 'a' a margin, not the images.

[co.ador]

the parent id for to center the caption on the image would go inside the ul and li tags like

<ul><li><a><div id="someid"><p></p><img> /></div></a></li></ul>

The above will make it?

[Kokos]

You already have a parent, the 'a'.

[co.ador]

I did block in the style.css sheet like

 #someid p {
			margin: 0 auto 0 auto;
padding: 0;
			}

To center the caption on the image inside the id #someid but so far has work any takes on that. maybe I am not being to specific in the css block

it is true I can use a I was thinking about that, thanks for confirm that. I will take the div id from there

[co.ador]

not avail on centering the caption I have use this block

#navigator ul li a {
			
		
		float:left;
		padding: 0 0 0 0;
margin:0 auto 0 1em;
	
		}
#navigator ul li a p{
			
		
		
		padding: 0 0 0 0;
margin:0 auto 0 auto;
	
		}

[co.ador]

This is the link to the css and HTML where you guys can edit it..

Edit this Fiddle - jsFiddle - Online Editor for the Web (JavaScript, MooTools, jQuery, Prototype, YUI, Glow and Dojo, HTML, CSS)

[Paul O'B]

Hi,

You can't nest a p element inside an a element (unless you are using html5 and even then you shouldnt because some browsers don't like it).

Do something simpler like this.

#navigator {
    width:604px;
    border:#006;
}
#navigator li img {
    margin: 0 auto;
    display:block;
    border:1px solid #000;
}
#navigator ul {
    margin: 0;
    padding: 0;
    border:1px solid #009;
    list-style-type: none;
    overflow:hidden;
}
#navigator ul li {
    display:inline;
}
#navigator li a {
    float:left;
    display:inline;
    text-align:center;
    margin:0 0 0 1em;
}

<td class"unordered" width="289"><div id="navigator">
                <ul>
                    <li><a href="children.php?category_id=4&ids=3&name=Tube">Tube<img src="images/profileimages/4.jpg" alt="Category 9" width="100" height="130" /></a></li>
                    <li><a href="children.php?category_id=4&ids=3&name=LCD">LCD<img src="images/profileimages/4.jpg" alt="Category 9" width="100" height="130" /></a></li>
                    <li><a href="children.php?category_id=4&ids=3&name=Plasma">Plasma<img src="images/profileimages/4.jpg" alt="Category 9" width="100" height="130" /></a></li>
                    <li><a href="children.php?category_id=4&ids=3&name=TV-DVD Combinations">TV-DVD Combinations<img src="images/profileimages/4.jpg" alt="Category 9"width="100" height="130" /></a></li>
                </ul>
            </div></td>

Text-align center is set on the parent to center the text and then the image is put onto a new line by using display:block and then auto margins to center the images as well.