My jQuery IMG center script fails in Chrome and Safari, but works IE?

Question

I have an e-commerce site where I'm displaying all my products and the thumbnails need to be centered in a div. The centering works in IE(even in compatibility mode), FF, and Opera, but fails in Chrome and Safari. In Chrome and Safari the image stays on the top of the div and does not center. I've changed my CSS around trying to locate the problem, but I can't seem to find what's causing the issue? Anyone see anything?

IE (GOOD)

enter image description here

CHROME (BAD)

enter image description here

JQUERY

var _h = $('div.product-image').height();
$('div.product-image img').each(function()
{
    var _top = (_h - $(this).height()) / 2;
    $(this).css('margin-top',_top);
});

CSS

.product
{
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
}
.product-image
{
    margin:2px auto;
    width:194px;
    height:145px;
    text-align:center;
    border:1px solid #999;
}
.product-image img
{
    max-height: 100%;
    max-width: 100%;
    border:1pc solid #999;
}

HTML

<div id="content">
    <a href="#">
        <div class="product">
            <div class="product-image">
                <img src="1.jpg" />
            </div>
            <div class="product-model">sadf</div>
            <div class="product-price"> : 234</div>
        </div>
    </a>
    <a href="#">
        <div class="product">
            <div class="product-image">
                <img src="2.jpg" />
            </div>
            <div class="product-model">sdaf</div>
            <div class="product-bottom"> : 2345</div>
        </div>
     </a>
</div>

Here's the Fiddle link : http://jsfiddle.net/anaZD/

Why are you using jQuery for this? Look in to vertical-align(might need to play around with line-height too). http://www.w3schools.com/cssref/pr_pos_vertical-align.asp — E_p, Nov 23 '12 at 23:22
That was my direction at first, but it seemed to not work in IE. All the images are different heights. The first image aligned prefectly, but all the others did not. I'll try again since I need to get this working today .. pressure's on ;) — Mike, Nov 23 '12 at 23:25
@ David, I'll try to put something together. I need to find images around the same size ... stand by ... — Mike, Nov 23 '12 at 23:27
Hm, looking at the down votes this is not a legit question. Sorry guys! — Mike, Nov 23 '12 at 23:41
Having looked at your JS Fiddle it worked for me (Chromium 22/Ubuntu 12.10) as soon as jQuery was selected from the library drop-down on the left: http://jsfiddle.net/davidThomas/anaZD/1/ Incidentally, [the `each()` is unnecessary](http://jsfiddle.net/davidThomas/anaZD/2/). — David Thomas, Nov 23 '12 at 23:43
Hm, it works on JS Fiddle, but not off my XAMPP? I added the .each() so it would evaluate every image on the page, rather than the first. I'll try it without. — Mike, Nov 23 '12 at 23:49

score 1 · Accepted Answer · edited May 23 '17 at 12:04

1

You might check this, it worked for me:

How to vertical align image inside div

div {position:relative;}
    img {position:absolute;top:0;bottom:0;margin:auto;}
    .image {min-height:50px}

div is your .product-image img is .product-image img

edited May 23 '17 at 12:04

Community

1
1

answered Nov 24 '12 at 00:48

transient_loop

5,984
15
58
117

score 0 · Answer 2 · answered Nov 24 '12 at 02:10

Perhaps the problem is with margintop. jQuery CSS uses 'marginTop' rather than 'margin-top' and you might want those images instead to be positioned relatively based on your calculations on the original script.

Here is an example, can you clarify if that's what you are trying to accomplish? See attached the JsFiddle

The Javacript

   var a=$;
   a.noConflict();

   var CountP=new Array();

    jQuery(function(a){

    a("div.product-image img").each(function(b,c){

    CountP[c]=(( a(this).parent('div').parent('div').height() -  a(this).height() )  / 2) +'px';

//Alert as we go for testing

alert('The difference that we are looking for this product is: ' + CountP[c] + ' and the height of this product is:' + a(this).height() );

To ensure browser compatibility try with marginTop for CSS or like in this example, position:relative; top and left values;

   a(this).css({'border':'2px inset red','position':'relative',
'top': CountP[c], 'left':'0.1em','margin':'auto','marginTop':'0.1px', 'display':'inline-block'});

})



});

Below a test on jsfiddle.net.. hope it help you out! http://jsfiddle.net/mt5fk/93/

score 0 · Answer 3 · answered Nov 24 '12 at 02:15

With your provided images ;) The JS is the same but it does not allow me to update with the link

 var a=$;
 a.noConflict();

var CountP=new Array();

 jQuery(function(a){
a("div.product-image img").each(function(b,c){

    CountP[c]=(( a(this).parent('div').parent('div').height() -  a(this).height() )  / 2) +'px';


    alert('The difference that we are looking for this product is: ' + CountP[c] + ' and the height of this product is:' + a(this).height() );


    //to ensure browser compatibility try with marginTop for CSS or like in this example, position:relative; top and left values;
    a(this).css({'border':'2px inset red','position':'relative','top': CountP[c], 'left':'0.1em','margin':'auto','marginTop':'0.1px', 'display':'inline-block'});



    });

 });

New JSFiddle

    http://jsfiddle.net/mt5fk/94/

My jQuery IMG center script fails in Chrome and Safari, but works IE?

3 Answers3