美好的一天。
目前,我的代码工作正常,除了元素(图像)左对齐(因为浮动)而不是中心。如何在不改变我的悬停功能的当前稳定性(没有溢出)和不使用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/
答案 0 :(得分:1)
我的建议是将每个图像放在自己的div中,并将div中心对齐你的包装div。或者使用ul和li并将它们内联并使文本居中。无论哪种方式,我都认为你当前的方法是不可行的