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

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

2 个答案: