html - 居中对齐多个淡入淡出图像

Question

我正在尝试将小部件中的多个交叉淡入淡出图标居中对齐。到目前为止，我只设法将它们左对齐或右对齐。如果我尝试做任何其他事情，它只会垂直堆叠每个图标。这是 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 .

Answer 1

尝试用 100% 宽度的 div 围绕它们，删除 float:left，并添加 display:inline-block

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