여러 크로스 페이드 이미지를 정렬하는 가운데

Question

위젯 내에 여러 개의 크로스 페이드 아이콘을 가운데 정렬하려고합니다. 지금까지는 왼쪽 또는 오른쪽으로 정렬 할 수만있었습니다. 다른 작업을 수행하려고하면 각 아이콘이 수직으로 쌓입니다.

.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 : 다음은 CSS의

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

내가 다섯 개 아이콘을 할 노력하고있어,하지만 그것을 알아낼 수 없습니다. crossfade 효과가 이미지를 쌓는 방식에 문제가있는 것 같습니다.

여기가 JFiddle입니다.

Answer 1

시도, 100 % 폭 사업부와 그들을 둘러싼 float:left을 제거하고, 당신이 할 수있는 display:inline-block

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

Answer 2

를 추가하는 것을 icon 포장됩니다 하나 개 더 div 태그와. 먼저 .icon 클래스의 float: left 속성을 제거해야합니다. 이제는 .icon 클래스를 인라인 블록으로 설정하고 새로운 div 태그를 래핑하는 방법 중 하나는 center에 텍스트 정렬 속성을 지정해야한다는 것입니다. 그러면 각 아이콘이 가운데에 배치됩니다.

코드는 다음과 같습니다. - http://jsfiddle.net/syrup/3on0x2Ly/1/