中心浮动块元素宽度不同宽度

时间:2013-04-03 06:09:12

标签: css

美好的一天。

目前,我的代码工作正常,除了元素(图像)左对齐(因为浮动)而不是中心。如何在不改变我的悬停功能的当前稳定性(没有溢出)和不使用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/

1 个答案:

答案 0 :(得分:1)

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