-1

すべての製品を表示している e コマース サイトがあり、サムネイルを div の中央に配置する必要があります。センタリングは IE (互換モードでも)、FF、および Opera で機能しますが、Chrome と Safari では失敗します。Chrome と Safari では、画像は div の上部にとどまり、中央に配置されません。問題を突き止めようとして CSS を変更しましたが、問題の原因が見つからないようです。何か見た人いますか？

いいえ（良い）

ここに画像の説明を入力

クロム（悪い）

ここに画像の説明を入力

Jクエリ

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-imageimgは.product-imageimgです

于 2012-11-24T00:48:05.310 に答える
0

おそらく問題はmargintopにあります。jQuery CSS は 'margin-top' ではなく 'marginTop' を使用し、元のスクリプトでの計算に基づいてこれらの画像を相対的に配置したい場合があります。

これが例です。それがあなたが達成しようとしていることかどうかを明確にできますか? 添付の JsFiddle を参照してください

ジャバスクリプト

   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 に答える