3

横に並べて配置されているが、高さの寸法に関係なく中央に垂直に配置する必要があるいくつかの流動的な画像を作成しようとしています。画像の最大幅を 100% に設定して、親の最大幅内にあるので、画面幅が小さい場合にこれらのサイズを縮小できます。しかし、私の問題は、これらの画像を垂直方向に配置する最良の方法がわからないことです。誰かアドバイスできますか?

CSS

.img-ctn {
    display: inline-block;
    margin-right: 3%;
    max-width: 120px;
    background: #cecece;
}

.img-ctn > img {
    display: block;
    height: auto;
    max-width: 100%;
    min-width: 100%;
    vertical-align: middle;
}

フィドル: http://jsfiddle.net/xmJ3R/

4

2 に答える 2

1

display:table-cell;画像ラッパーに適用してから、padding:3%;マージンの代わりに設定してみてください:

デモ: http://jsfiddle.net/xmJ3R/

.img-ctn {
    display: table-cell;
    max-width: 120px;
    background: #cecece;
    vertical-align:middle;
    padding:3%;
}

または内側の画像に余白を設定します。

于 2013-07-31T17:47:28.793 に答える