将包含左对齐图像的页面上的图像网格居中

Question

我有一个div，它只包含一堆145px X 145px的缩略图。div没有设置宽度，因此浏览器窗口可以容纳一行中最多的图像。现在我想将div容器居中，但保持图像左对齐。所以我不能使用text-align:center，因为如果最后一行中的图像较少，那么该行将位于其余行的中心。有没有一种方法可以用css将容器div居中，或者我必须使用javascript？

我在这里有一个jsbin：http://jsbin.com/eTukegu/3/edit

(我只是放了7个缩略图作为例子，我用了div而不是图像)

<div id="thumbnail_container">
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>

CSS：

#thumbnail_container
{
margin: 5px;
padding: 0;
}
.thumbnail
{
width: 145px;
height: 145px;
background-color: #fff;
display: inline-block;
margin: 5px 1px 1px 5px;
padding: 0;
}

Answer 1

使用display:table并将左/右边距更改为auto:

#thumbnail_container{
display: table;
margin: 5px auto;
padding: 0;
}

Answer 2

这是我为解决这个问题而编写的javascript：(我的缩略图是145x145，每个缩略图之间有10px)

window.onload = function()
{
setNewWidth();
};
window.onresize = function ()
{
setNewWidth();
};
function setNewWidth()
{
var containerWrapper = document.getElementById('thumbnail_container_wrapper');
var containerWrapperWidth = containerWrapper.offsetWidth;
var boxesInRow = Math.floor((containerWrapperWidth - 10) / 155);
var newWidth = boxesInRow * 155;
var container = document.getElementById('thumbnail_container');
container.style.width = newWidth + "px";
}