css - 浮動ブロック要素の幅を異なる幅でセンタリングする

Question

良い一日。

現在、私のコードは正常に動作しますが、要素 (画像) が左に配置され (フロートのため)、中央ではありません。ホバー機能の現在の安定性を変更せずに（オーバーフローは何もない）、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/