Help with alignment in a grid of products

I have a grid of products four wide

http://jsfiddle.net/QpX4f/4/

Why won't margin:0 auto; on the开发者_StackOverflow社区 product images centering them? And why aren't those view buttons inline?

---

http://jsfiddle.net/QpX4f/5/

Note that i'm not sure what you're trying to achieve with the blue bg but it appears to be the exact same size at the product image... i've just placed it exactly behind the product image, move as you please

edit :: I'll add my two cents to give you some pointers so you can learn.

A few notes, your CSS could use some real organization. This smashing article is great for learning about css.

Next, you're using floats all over the place and I'm not sure why. Float only the elements you need to which is your container for each production.

For the bg image, you just need to actually set its coords to center it, also, the floating if the product image inside the link was messing up its position, and your margins were taking it out of center.

The view button is unnecessarily wrapped in a p tag, which does nothing.

In my opinion your markup is extremely bloated. You should start with simple cases and only add declarations when you see fit. Lean CSS is often much easier to debug than bloated. (as with any code really)

Also, using a tool like Firebug or Web Inspector will really help you see how your css declarations actually affect the positioning of elements.

answering your new question

your margin:0 auto was most likely messed up by the floats. This would would if it was using a normal inline display with not float. The view buttons were inline, they were just pushed down according to the content above, to take it out of this display mode I made it position:absolute (note you have to position the parent relative) and just set it to be at the bottom left.

---

Here you go: http://jsfiddle.net/gVLXV/

So...

ul.display li .image { background: url(http://propono.co.uk/image-shadow.png) no-repeat top center; } /* Added top and center to the background. */

ul.thumb_view li .image { padding:0 0 0 8px; }