中心对齐多个交叉淡入淡出图像

Manda 发表于 Dev

发送

我正在尝试使小部件内的多个淡入淡出图标居中对齐。到目前为止，我只设法使它们左对齐或右对齐。如果我尝试做其他事情，它只会垂直堆叠每个图标。这是CSS：

.icon {
    float:left;
    position:relative;
    height:32px;
    width:32px;
    padding:4px;
}

.icon img {
    position:absolute;
    left:0;
    opacity: 1;
    -webkit-transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -o-transition: opacity .3s ease-in-out;
    -ms-transition: opacity .3s ease-in-out;    
    transition: opacity .3s ease-in-out;
}

.icon img.top:hover {
    opacity:0;
}

还有一个图标的HTML：

<div class="icon">
    <img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter-1.png" class="bottom"  />
    <img src="http://i516.photobucket.com/albums/u322/_manda_rose_/BLOG/Syrup%20Misc/Social%20Icons/twitter.png" class="top" />
</div>

我正在尝试使用五个图标来实现，但无法弄清楚。淡入淡出效果如何堆叠图像似乎是一个问题。

它在JFiddle上。

保罗

尝试用100％宽度的div包围它们，然后移除float:left并添加display:inline-block

http://jsfiddle.net/3on0x2Ly/2/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。