Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [Help] Images product thumbs centering

    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!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,290
    Thanks
    23
    Thanked 611 Times in 610 Posts
    If you can live with a slightly larger dashed box, so the images are not cut off, then try this:
    Code:
    #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;
    }

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    If you can live with a slightly larger dashed box, so the images are not cut off, then try this:
    Code:
    #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....

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,290
    Thanks
    23
    Thanked 611 Times in 610 Posts
    I used in-line styling
    Code:
    <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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •