JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
  
        <div class="product">
            <div class="product-image"> <img src="http://i307.photobucket.com/albums/nn307/jarhead6153/Guns/IMAG0215.jpg" alt="Product Image 1" title="Product Image 1"></img>
            </div>
            <div class="product-model">Product Model</div>
            <div class="product-price">$ USD</div>
        </div>
  
 
        <div class="product">
            <div class="product-image">
                <img src="http://i1087.photobucket.com/albums/j474/factoryrat1/guns/DSC02620.jpg" alt='Product Image 2' />
            </div>
            <div class="product-model">Product model</div>
            <div class="product-bottom">EUR</div>
        </div>
</div>

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;
}

JavaScript

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';
              
   
    //onclick:
        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'});
        

       
    })
    
});