-1

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

即（好）

在此处输入图像描述

铬（坏）

在此处输入图像描述

查询

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/

4

3 回答 3

1

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

如何垂直对齐div内的图像

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

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

于 2012-11-24T00:48:05.310 回答
0

也许问题出在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 或类似本例中的 position:relative; 顶部和左侧值；

   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/

于 2012-11-24T02:10:53.113 回答
0

使用您提供的图像；) 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/
于 2012-11-24T02:15:50.437 回答