Css 居中浮动块元素宽度不同宽度

你好

目前，我的代码运行良好，只是元素（图像）向左对齐（因为浮动），而不是居中对齐。如何在不改变悬停函数的当前稳定性（无溢出）和不使用display:inline块（不支持IE）的情况下实现它

HTML:

---

jsiddle:

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

浮动不应该居中是的，我知道，但我该如何居中它？为什么您要尝试居中浮动图像？如果您试图将图像/div/居中，请不要将其浮动。只需删除您的

浮动：left

，您的图像就会全部居中。是的，我可以这样做，但我无法将高度和宽度添加到锚定父元素中…现在查看悬停效果：包含图像的“行”不再固定，而且内容正在向下移动：如果你想改变你的方法，我不介意键入一个解决方案。让我知道这是否是你想要的。我决定先看看你的css。我的意思是我理解图像的中心，明白了。这是通过移除浮动来完成的。现在，您不希望出现溢出，因此根据您的转换情况，在底部添加所需数量的px填充。现在，如果这不是您想要的，并且您希望它们像第一个JSFIDLE（水平而不是垂直）一样采用内联样式，那么情况就不同了。请通知我。或者你从宽度中删除自动，并设置每个“a”的宽度，如：是的，谢谢，但它仍然向左对齐。我认为最好的解决方案是你的第一个，但我宁愿删除浮点数，将图像和它们的a标记显示为内联，这样我就可以将其居中。然后，我只需将内联块添加到a标记中，并为它们提供固定的高度和自动宽度

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

#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;
}