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/

Answer 2

您可以使用另外一个div标记执行此操作，该标记将包裹icon。首先，您必须删除类float: left的{{1}}属性。现在，其中一种方法是将.icon类设置为内联块和新的div标签，它们将它们包装起来，你必须为它设置一个text-align属性。这将使每个图标居中。

以下是代码 - http://jsfiddle.net/syrup/3on0x2Ly/1/

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

2 个答案: