html - div 中水平对齐的 div

Question

我试图水平对齐 galleria-image与 table-cell漂浮但没有成功。任何人都知道如何做到这一点。我可能或多或少会有这些 <div class="galleria-image">我希望水平居中。

<div class="galleria-thumbnails-container">
    <div class="galleria-thumbnails-list">
        <div class="galleria-thumbnails">
            <div class="galleria-image active">
                <span class="img"></span>
            </div>
            <div class="galleria-image">
                <span class="img"></span>
            </div>
            <div class="galleria-image">
                <span class="img"></span>
            </div>
        </div>
    </div>
</div>

<style>
.galleria-thumbnails-container {
    background-color:orange;
}
.galleria-thumbnails-list {
    display: table;
    position: relative; 
}
.galleria-thumbnails {
    height: 22px;
    overflow: hidden;
    position: relative;
    width: 100% ! important;
    display: table-row;
}
.galleria-thumbnails .galleria-image {
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #000000;
    cursor: pointer;
    display: table-cell;
    float: left;
    height: 20px;
    margin: 0 5px 0 0;
    width: 20px;
}
</style>

在这里摆弄 --> http://jsfiddle.net/RsbP6/

我有什么:

我想得到什么:

感谢帮助

Answer 1

添加 margin: 0 auto; 到 .galleria-thumbnails-list css

fiddle here