Question

我有一组想要用来创建图像推子的图像，图像可以是任意大小，所以我想将它们设置为所有图像叠加在一个彼此顶部的中心到他们的父容器，但不完全确定如何实现这一点，如果有人可以建议我如何做这将是伟大的。

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/

基本上，如果我在列表项中添加绝对位置，那么这会取消垂直对齐图像的内联块

Answer 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;
}

如图所示，使用“Centerer”范围进行垂直居中的技巧。（如果你想解释为什么会这样，请告诉我..）

Answer 2

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

如何将绝对定位的图像垂直对齐？

2 个答案: