center aligning several crossfade images

Question

I'm trying to center align several crossfade icons within a widget. So far, I've only managed to align them either left or right. If I try to do anything else, it just stacks each icon vertically. Here's the 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;
}

And the HTML for one icon:

<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>

I'm trying to do it with five icons, but can't figure it out. Seems to be a problem with how the crossfade effect stacks the images.

Here it is on JFiddle.

Answer 1

Try surrounding them with a 100% width div, removing float:left, and adding display:inline-block

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