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

1

将每个图像包含在一个容器 div 中，宽度和高度为 100%，绝对位置。在容器 div 中居中图像。现在，div 堆叠在一起，使用容器 div 上的淡入淡出。

HTML：

<div id="FaderHolder">
    <div class="ImgContainer">
        <span class="Centerer"></span>
        <img src="..."/>
    </div>
    <div class="ImgContainer">
        <span class="Centerer"></span>
        <img src="..."/>
    </div>
    <div class="ImgContainer">
        <span class="Centerer"></span>
        <img src="..."/>
    </div>
</div>

CSS：

#FaderHolder
{
    /*YOUR CSS*/
    position: relative;
    width: 200px;
    height: 200px;
}

.ImgContainer
{
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
}
.ImgContainer > img
{
    vertical-align: middle;
}
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

垂直居中 img 的技巧是使用“Centerer”跨度，如图所示。（如果您想解释为什么会这样，请告诉我..）

于 2013-08-27T09:37:18.753 回答
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 回答