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>

在这里小提琴 - ＆gt; http://jsfiddle.net/RsbP6/

我所拥有的：

我想得到什么：

感谢您的帮助

Answer 1

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

fiddle here