css - div的布局作为表格

Question

我在格式化使用div创建的html 3x3库时遇到问题。现在看来是这样的：

http://codepen.io/makkam121/pen/EisKd

＆＃13;

＆＃13;

.gallery {
  width: auto;
  margin: 50px auto;
  padding: 10px;
  border: 2px solid black;
}
.gallery_row {
  margin: 10px 10px 10px 0px;
  width: auto;
}
.gallery_image {
  width: auto;
  display: inline-block;
  margin-right: 10px;
}
img {
  border: 2px solid black;
  padding: 10px;
  background-color: #BBAABB;
}

＆＃13;

<div class="gallery">
  <div class="gallery_row">
    <div class="gallery_image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt="">
    </div>
    <div class="gallery_image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt="">
    </div>
    <div class="gallery_image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt="">
    </div>
  </div>
  <div class="gallery_row">
    <div class="gallery_image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt="">
    </div>
    <div class="gallery_image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt="">
    </div>
    <div class="gallery_image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt="">
    </div>
  </div>
  <div class="gallery_row">
    <div class="gallery_image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt="">
    </div>
    <div class="gallery_image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt="">
    </div>
    <div class="gallery_image">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Wilderness_road.jpg/70px-Wilderness_road.jpg" alt="">
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望图库自动对齐到页面中心，因为一行中的图像数量可能会有所不同。相反，我得到一个div，右边距很大，到达页面的右边缘。另外，我希望项目和外边框之间的间距相等（它们不是......）。

我做错了什么？我将不胜感激任何帮助。

Answer 1

http://codepen.io/anon/pen/mgqeJ

 .gallery{
  width:auto;
  margin: 0auto;
  width:100%;
  text-align:center;
  border:2px solid black;

}
.gallery_row{
  margin:2%;
  width:auto;       
}
.gallery_image{
  width:auto;
  display:inline-block;
  margin:2% 5% 2% 5%
}
img {
  border:2px solid black;
  padding:20%;
  background-color:#BBAABB;
}