2

div 内で ing 要素を垂直方向に揃えようとしています。唯一の問題は、 img 要素の高さが固定されていないことです。table、table-cell、inline-block、inline と組み合わせて vertical-align を試みました。これはどれもうまくいかないようです。どうすればこれを達成できるか誰にもわかりませんか？私の問題を再現する JSFiddle を作成しました。

JsFiddle: http://jsfiddle.net/6gMcK/1/

HTML:

<div id="image-container">
    <img src="http://www.image2012.com/images/2013/03/landscapes-landscape-free.jpg">
</div>

CSS:

#image-container {
    padding:5px;
    height: 135px;
    border: 1px solid black;
    display: table;
    float:left;
}

#image-container img{
    display: table-cell;
    max-height:125px;

    vertical-align: middle;
}
4

3 に答える 3

1

このようにいくつかのプロパティを変更します 

   #image-container {
    padding: 5px;
    height: 135px;
    border: 1px solid black;
    display: table-cell;
    vertical-align: middle;
}

#image-container img{
    max-height: 125px;
    display: block;
}

ライブデモ

于 2013-04-24T08:44:52.043 に答える
0

私がよく使用する解決策は、画像を画像コンテナーの背景にすることです。このようにして、幅と高さを必要に応じて設定し、コンテナーの任意の画像とサイズに合わせて、絶対的な位置を少し設定すると、画像全体が常に表示されます。

#image-container {
    position:absolute;
    left:30%;
    right:30%;
    min-width:135px;
    height: 135px;

    border: 1px solid black;
    background-image:url('image.png');
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

もちろん、必要に応じて、いつでも幅の値をいじることができます。これは、画像を表示するためのシンプルなソリューションであることが常にわかりました。

于 2013-04-24T09:48:17.597 に答える
0

コンテナに画像が 1 つだけあり、コンテナの高さが固定されている場合は、単純line-height = container_height_pxにコンテナに適用できます

このデモを試す

于 2013-04-24T09:55:27.670 に答える