0

画像フェーダーを作成するために使用したい一連の画像があります。画像は任意のサイズにすることができるので、すべての画像が親の真ん中に重なるように設定したいと思います。コンテナーですが、これを達成する方法が完全にはわかりません。誰かがこれを行う方法を提案できれば、それは素晴らしいことです。

CSS

.logo-fader {
    width: 200px;
    max-height: 100px;
    margin: auto;
    background: grey;
    text-align: center;
    position: relative;
}

.logo-fader > li {
    /* opacity: 0; */
    -webkit-transition: opacity .6s linear;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
}

.logo-fader > li.show-logo {
    opacity: 1;
}

.logo-fader > li img {
    display: block;
    max-width: 100%;
    max-height: 100px;
}

JSFiddle: http://jsfiddle.net/s7J2V/1/

基本的に、リスト項目に絶対位置を追加すると、画像を垂直方向に整列させるインラインブロックがキャンセルされます

4

2 に答える 2

0 
logo-fader > li {
    /* opacity: 0; */
    -webkit-transition: opacity .6s linear;
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
}
于 2013-08-27T09:32:05.987 に答える