[Help] Images product thumbs centering

[joelupet]

I need your help..

I am not a web developer so I need somebody who's willing to help and find a solution...

here are some codings made...


http://jsbin.com/ititac/1/edit

Problem:
The images not centered

Solution:
The images should be in center of the block around red dashed....
Without changing its height and witdh..

Thanks in Advance!

[sunfighter]

If you can live with a slightly larger dashed box, so the images are not cut off, then try this:

#product_thumbs .product_thumb {
float: left;
padding-top: 9px;
border: 1px dashed #B52020;
margin: 0 10px 10px 0;
width: 120px;
height: 90px;
text-align: center;
}

[joelupet]

Originally Posted by sunfighter

If you can live with a slightly larger dashed box, so the images are not cut off, then try this:

#product_thumbs .product_thumb {
float: left;
padding-top: 9px;
border: 1px dashed #B52020;
margin: 0 10px 10px 0;
width: 120px;
height: 90px;
text-align: center;
}

Yeah, your advice really works, i appreciate it..

I have resolve the problem but, i found out that vertical image are not centered

see here http://jsbin.com/ititac/10/edit

Is there any way to fix that?

thanks for your help....

[sunfighter]

I used in-line styling

<div class="product_thumb ">
    <a href="javascript:void(0)">
    <img style="margin-top:0;" src="http://cdn.shopify.com/s/files/1/0174/5504/products/action-form-medium-144_small.jpg?4889" alt="Adjustoform Action Form Mannequin Size 16 - 22" rel="lightbox-images">
    </a>
</div>

But it would be better to add a class for vertical images that do this in the css