3

重複の可能性:
画像の中央を垂直方向と水平方向に揃える

画像をphpファイルにアップロードしているので、画像を特定の幅または高さのいずれか小さい方にサイズ変更できます。私が使用している画像リサイザーは phpclasses.org のクラスであり、かなりうまく機能しているようです。問題は、すべての画像が同じサイズではないことです。広いものと狭いものもあれば、ほぼ正方形のものもあります。したがって、これにより、すべての画像が中央ではなくdivの上部に配置されます。私の考えでは、CSS で画像を完全に中央に配置して、表示時にさまざまなサイズが適切に見えるようにしますが、水平方向には中央揃えにすることはできますが、垂直方向には中央揃えにすることはできません。ここに私が中心にしようとしているもののスクリーンショットがあります:

ここに画像の説明を入力

ご覧のとおり、銃は div の上に配置されていますか? 他の画像の高さは異なるため、ハードコードされた図を使用して中央に押し込むことはできません。画像のサイズを決定し、そこから計算する方法が必要です。

画像が含まれているdivのコードは次のとおりです。

#product {
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
}
#product-image {
    margin:2px auto;
    width:194px;
    height:145px;
    border:1px solid #999;
    text-align:center;
}

ご覧いただきありがとうございます。

4

4 に答える 4

1 
#product
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
#product img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}

Max-Height / Max-Width は、大きすぎる可能性のある画像を処理するために使用されます。

于 2012-11-21T03:06:12.890 に答える
1

絶対位置を使用できない動的な垂直方向の配置については、すべての状況で絶対的な修正を行うために JavaScript を使用することをお勧めしますが、垂直方向の配置については、次のガイドに記載されているいくつかの手法を使用できます。

$(document).ready(function(){
    var image = ​$('#product-image')​​​​​​​​​;
    var container = $(image).parent();

    var margin = (container.height() - image.height()) / 2;
    image.css('margin-top', margin); 
});

次のCSSで

#product
{
    float:left;
    margin:5px;
    width:200px;
    height:200px;
    border:1px solid #999;
    text-align:center;
}

#product-image
{
    margin:2px auto;
    width:194px;
    height:145px;
    border:1px solid #999;
}​
于 2012-11-21T03:36:25.413 に答える