0

再会。

目前，我的代码工作正常，除了元素（图像）左对齐（因为浮动）而不是居中。如何在不改变悬停功能的当前稳定性（没有溢出）和不使用 display: inline-block（不是 IE 友好）的情况下做到这一点？

HTML：

<div id="customers">
 <a href=""><img class="alignleft size-full wp-image-1180" alt="absa" src="" /></a>
 <a href=""><img class="alignleft size-full wp-image-1178" alt="kumba" src=""/></a>
 <a href=""><img class="alignleft size-full wp-image-1176" alt="samancor" src=""/></a>
 <a href=""><img class="alignleft size-full wp-image-1179" alt="bosch" src="" /></a>
 <a href=""><img class="alignleft size-full wp-image-1185" alt="" src="" /></a>
 <a href=""><img class="alignleft size-full wp-image-1187" alt="DBSA" src="" /></a>
 <a href=""><img class="alignleft size-full wp-image-1190" alt="dac" src=""/></a>
 <a href=""><img class="alignleft size-full wp-image-1191" alt="eaton" src="" /></a>
 <a href=""><img class="alignleft size-full wp-image-1192" alt="megaphone" src="" /></a>
 <a href=""><img class="alignleft size-full wp-image-1193" alt="eazi" src=""/></a>
 <a href=""><img class="alignleft size-full wp-image-1194" alt="smss" src="" /></a>
 <a href=""><img class="alignleft size-full wp-image-1195" alt="partyat" src="" /></a> 
</div>

CSS：

#customers a {
    display: block;
    float: left;
    margin: 0 20px;
    text-align: center;
    height: 80px;
    width: auto;
}
#customers a img {
    height: 60px;
    width: auto;
    -webkit-transition: all 400ms linear;
    -moz-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    -ms-transition: all 400ms linear;
    transition: all 400ms linear;
}
#customers a img:hover {
    height: 80px;
    width: auto;
    -moz-box-shadow: 0px 30px 30px -25px #acacac;
    -webkit-box-shadow: 0px 30px 30px -25px #acacac;
    box-shadow: 0px 30px 30px -25px #acacac;
}

JSFIDDLE：http: //jsfiddle.net/fL5Gh/13/

4

1 回答 1

1

我的建议是将每个图像放在它自己的 div 中，并将 div 中心对齐到你的包装器 div 中。或使用 ul 和 li 并内联它们并将该文本居中。无论哪种方式，我都认为您当前的方法不可行

于 2013-04-03T06:52:03.910 回答