Databases
StackOverflow2013
Postsdbo
POMy jQuery IMG center script fails in Chrome and Safari, but works IE?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMy jQuery IMG center script fails in Chrome and Safari, but works IE?
    text
    copied!<p>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?</p> <p><strong>IE (GOOD)</strong></p> <p><img src="https://i.stack.imgur.com/lbFHK.png" alt="enter image description here"></p> <p><strong>CHROME (BAD)</strong></p> <p><img src="https://i.stack.imgur.com/gCk4w.png" alt="enter image description here"></p> <p><strong>JQUERY</strong></p> <pre><code>var _h = $('div.product-image').height(); $('div.product-image img').each(function() { var _top = (_h - $(this).height()) / 2; $(this).css('margin-top',_top); }); </code></pre> <p><strong>CSS</strong></p> <pre><code>.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; } </code></pre> <p><strong>HTML</strong></p> <pre><code>&lt;div id="content"&gt; &lt;a href="#"&gt; &lt;div class="product"&gt; &lt;div class="product-image"&gt; &lt;img src="1.jpg" /&gt; &lt;/div&gt; &lt;div class="product-model"&gt;sadf&lt;/div&gt; &lt;div class="product-price"&gt; : 234&lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;a href="#"&gt; &lt;div class="product"&gt; &lt;div class="product-image"&gt; &lt;img src="2.jpg" /&gt; &lt;/div&gt; &lt;div class="product-model"&gt;sdaf&lt;/div&gt; &lt;div class="product-bottom"&gt; : 2345&lt;/div&gt; &lt;/div&gt; &lt;/a&gt; &lt;/div&gt; </code></pre> <p>Here's the Fiddle link : <a href="http://jsfiddle.net/anaZD/" rel="nofollow noreferrer">http://jsfiddle.net/anaZD/</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload