我的 jQuery IMG 中心脚本在 Chrome 和 Safari 中失败，但在 IE 中有效？答案

【问题标题】：My jQuery IMG center script fails in Chrome and Safari, but works IE?我的 jQuery IMG 中心脚本在 Chrome 和 Safari 中失败，但在 IE 中有效？
【发布时间】：2012-11-12 06:33:21
【问题描述】：

我有一个电子商务网站，我在其中展示我的所有产品，并且缩略图需要以 div 为中心。居中在 IE（即使在兼容模式下）、FF 和 Opera 中有效，但在 Chrome 和 Safari 中失败。在 Chrome 和 Safari 中，图像保持在 div 的顶部并且不居中。我已经更改了我的 CSS 以试图定位问题，但我似乎无法找到导致问题的原因？有人看到了吗？

IE（良好）

铬（坏）

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>

这里是小提琴链接：http://jsfiddle.net/anaZD/

【问题讨论】：

你为什么要使用 jQuery？查看垂直对齐（可能也需要使用 line-height）。 w3schools.com/cssref/pr_pos_vertical-align.asp
有live demo的机会吗？
最初是我的方向，但在 IE 中似乎行不通。所有的图像都是不同的高度。第一个图像完全对齐，但所有其他图像都没有。我会再试一次，因为我今天需要让这个工作......压力很大;）
@David，我会试着把一些东西放在一起。我需要找到相同大小的图像...等待...
哈哈，好主意....

标签： php jquery html css

【解决方案1】：

你可以检查一下，它对我有用：

How to vertical align image inside div

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

div 是您的 .product-image img 是 .product-image img

【讨论】：

【解决方案2】：

也许问题在于margintop。 jQuery CSS 使用 'marginTop' 而不是 'margin-top'，您可能希望根据您对原始脚本的计算相对定位这些图像。

这是一个例子，你能澄清一下这是否是你想要完成的吗？见附件 JsFiddle

Java脚本

   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() );

为确保浏览器兼容性，请尝试使用 CSS 的 marginTop 或类似本示例中的内容，位置：相对；顶部和左侧值；

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

})



});

下面是 jsfiddle.net 上的一个测试。希望它对你有所帮助！ http://jsfiddle.net/mt5fk/93/

【讨论】：

【解决方案3】：

使用您提供的图片；) JS 是相同的，但它不允许我使用链接进行更新

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



    });

 });

新的 JSFiddle

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

【讨论】：